webpack extract-text-webpack-plugin ignoreOrder not working - css

I'm trying to use extract-text-webpack-plugin to generate bundled css file and make it generated in order.
Now, CSS file was generated, but "ignoreOrder" seems not working, the content's order doesn't obey source code's order.
//webpack.config.js
const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const ExtractSCSS = new ExtractTextPlugin({
filename: function(getPath) {
return getPath('css/[name].css');
},
allChunks: false
});
module.exports = {
entry: {
'index': './index.js',
// ......
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, ((env = 'develop') => {
let assignRoot = {
'develop': './develop/bundle/'
// ......
};
return assignRoot[env];
})(process.env.NODE_ENV))
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: [{
loader: 'imports-loader?this=>window,jQuery=>this.jQuery'
}, {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
},
{
test: /\.css$|\.scss$/,
use: ExtractSCSS.extract({
use: [
{
loader: 'css-loader',
options: {
minimize: true
}
},
{ loader: 'sass-loader' },
{
loader: 'preprocess-loader',
options: {
THEME: 'uplantravel'
}
}
],
})
}]
},
plugins: ExtractSCSS
};
And my js imports some scss and js.
//index.js
import './#magaele/a.scss';
import './#magaele/b.scss';
import './#magaele/c/css.scss';
//......
import './#magaele/a/module.js';
import './#magaele/b/module.js';
import './#magaele/c/module.js';
//......
webpack version: 3.5.5
extract-text-webpack-plugin version: 3.10.10

Related

Module parse failed: Unexpected character '#' (1:0) You may need an appropriate loader to handle this file type

I'm having some issues. I keep getting this error
Module parse failed: Unexpected character '#' (1:0) You may need an
appropriate loader to handle this file type, currently, no loaders are
configured to process this file. See
https://webpack.js.org/concepts#loaders
#import url("https://cloud.typography.com/7374818/6819812/css/fonts.css");
I've tried some of the suggested solutions I've found online and none seems to work.
This is what my Webpack config looks like
const path = require('path');
const webpack = require('webpack');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const devMode = process.env.NODE_ENV !== 'production';
module.exports = {
entry: {
main: path.resolve(__dirname, './src/App.tsx'),
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'public'),
sourceMapFilename: "[name].js.map"
},
externals: {
'react': 'React',
'react-dom': 'ReactDOM',
},
devtool: 'source-map',
module: {
rules: [
{
test: /\.(js|jsx|ts|tsx)$/,
exclude: /node_modules/,
include: [
path.resolve(__dirname, './src'),
],
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env', '#babel/preset-react', '#babel/preset-typescript'],
},
},
{
test: /\.(scss|css)$/,
include: path.resolve(__dirname, './src'),
use: [
MiniCssExtractPlugin.loader,
'style-loader',
'css-loader',
{
loader: "postcss-loader",
options: {
plugins: () => [
require("autoprefixer")()
],
},
},
'sass-loader',
],
},
{
test: /\.(png|woff|woff2|eot|ttf|otf|svg)$/,
loader: 'url-loader',
options: {
limit: 100000,
}
},
],
},
resolve: {
extensions: ['.js', '.jsx', 'json', 'ts', 'tsx', '.scss'],
alias: {
src: path.resolve(__dirname, './src/'),
},
},
devServer: {
historyApiFallback: true,
contentBase: './public',
port: 3030,
open: true,
compress: true,
hot: true,
},
optimization: {
splitChunks: {
chunks: 'all',
},
},
plugins: [
new MiniCssExtractPlugin({
filename: devMode ? '[name].css' : '[name].[hash].css',
chunkFilename: devMode ? '[id].css' : '[id].[hash].css',
}),
new CleanWebpackPlugin(),
new webpack.HotModuleReplacementPlugin(),
],
};
The component looks like this. uilib is a local dependency I'm linking using yarn link
import React from 'react';
import ReactDOM from 'react-dom';
import { Header, Footer } from 'uilib';
import 'uilib/index.css';
export const App: React.FC<{}> = () => (
<>
<Header/>
<div>Hello in oct</div>
<Footer/>
</>
);
ReactDOM.render(
<App />,
document.getElementById('root'),
);
The uilib/index.css looks like this
#import url("https://cloud.typography.com/7374818/6819812/css/fonts.css");
.header {
height: 70px;
}
I feel that ulib folder is perhaps not inside src directory.
Can you try changing your webpack loader config for scss|css to be like so:
{
test: /\.(scss|css)$/,
include: path.resolve(__dirname) // <---- leave it __dirname or remove the prop completely
....
....
}
I am hoping this will let webpack look at project's root which can help it parse the file accordingly.
Also, unless ulib is in node_modules, you can exclude it from loader with exclude: 'node_modules'

React animated slider + webpack + scss and css

I built react app from scratch. I'm trying to add react animated slider for my site from npm package. Unfortunatelly only images are shown - but one below another, I mean not in one row - and also navigations arrow are above images, even if styles are attached. When I use this npm package with create-react-app it works fine, as expected, but in my own boilerplate it brokes. I'm asking for help. Here's my code:
webpack.config.js:
const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
entry: ["babel-polyfill", "./src/index.js"],
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.(css|scss)$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
sourceMap: true,
importLoaders: 1,
modules: true,
localIdentName: '[name]__[local]__[hash:base64:5]'
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true
}
},
]
},
{
test: /\.(woff|svg|png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: './assets'
}
}
]
}
]
},
plugins: [
new MiniCssExtractPlugin({ filename: "style.css" }),
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
})
]
};
slider.js component:
import React, { Component } from 'react';
import Slider from 'react-animated-slider';
import 'react-animated-slider/build/horizontal.css';
import one from '../assets/slider/one.jpg';
import two from '../assets/slider/two.jpg';
import three from '../assets/slider/three.jpg';
class Carousel extends Component {
render() {
const content = [one, two, three];
return (
<Slider>
{content.map((article, index) => <div key={index}>
<img src={article} alt='wtz' />
</div>)}
</Slider>
);
}
}
export default Carousel;
app.js component:
import React from 'react';
import classes from './App.scss';
import Header from '../header/Header';
import Nav from '../nav/Navigation';
import Carousel from '../carousel/Carousel';
const app = () => {
return (
<div className={classes.container}>
<Header />
<Nav />
<Carousel />
</div>
);
};
export default app;
I think that somthing must be wrong with bundling, I don't know. Also my console tells that everything is correct.
You problem is that you have the same rule for sass and for css, sass-loader is being applied to css too.
const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
entry: ["babel-polyfill", "./src/index.js"],
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.(css)$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
sourceMap: true,
importLoaders: 1,
modules: true,
localIdentName: '[name]__[local]__[hash:base64:5]'
}
}
]
},
{
test: /\.(scss)$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
sourceMap: true,
importLoaders: 1,
modules: true,
localIdentName: '[name]__[local]__[hash:base64:5]'
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true
}
},
]
},
{
test: /\.(woff|svg|png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: './assets'
}
}
]
}
]
},
plugins: [
new MiniCssExtractPlugin({ filename: "style.css" }),
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
})
]
};

Rearrange style order in ccs bundle

After a migration from grunt, the styles are not working as intended with webpack. All the styles were concatenated in the gruntfile like this:
target: {
files: {
"all.css": [
"node_modules/bootstrap/dist/css/bootstrap.css",
"bower_components/toastr/toastr.css",
"bower_components/angular-ui-select/dist/select.css",
"node_modules/font-awesome/font-awesome.css",
"bower_components/angular-loading-bar/build/loading-bar.css",
"bower_components/angular-ui-tree/dist/angular-ui-tree.css",
"content/styles/awesome-bootstrap-checkbox.css",
"content/styles/tradesolution.css",
"content/styles/site.css",
"content/styles/ts.css",
"content/styles/nyKladd.css"
]
}
}
My current config in webpack:
var webpack = require('webpack');
var globby = require('globby');
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var CleanWebpackPlugin = require('clean-webpack-plugin');
var AssetsPlugin = require('assets-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var DashboardPlugin = require('webpack-dashboard/plugin');
const ConcatPlugin = require('webpack-concat-plugin');
const extractCSS = new ExtractTextPlugin('[name].css');
const extractLESS = new ExtractTextPlugin('[name].css');
module.exports = {
entry: {
app: globby.sync(['./app/app.js','./app/app.run.js', './app/app.config.js', './app/**/*.js']),
Ztyles: globby.sync(['./content/styles/less/*.less']),
styles: globby.sync(['./content/styles/*.css']),
images: globby.sync(['./content/images/**/*.*']),
vendor: [
// removed to save space
],
},
output: {
filename: './scripts/[name].bundle.js',
path: path.join(__dirname, "public")
},
devServer: {
port: 1384,
contentBase: './public/'
},
// Enable sourcemaps for debugging webpack's output.
devtool: (() => {
if(NODE_ENV = "devlopment") return 'source-map'
else return 'cheap-module-eval-source-map'
}) (),
module: {
rules: [
{
test: /\.html$/,
loader: 'raw-loader',
exclude: [/node_modules/]
},
{
test: /\.css$/,
loader: extractCSS.extract(
{ fallback: 'style-loader', use: 'css-loader' }
),
//'style-loader', 'css-loader'
},
{ test: /\.less$/,
use: extractLESS.extract(
{fallback:'style-loader', use: ['css-loader','less-loader']}
)
//'style-loader', 'css-loader!less-loader'
},
{
test: /\.(ico)$/,
loader: "url-loader?name=./[name].[ext]",
include: path.resolve(__dirname, "content", "images")
},
{
test: /\.(jpg|jpeg|gif|png|PNG|tiff|svg)$/,
loader: 'file-loader?name=/[path]/[name].[ext]',
include: path.resolve(__dirname, "content", "images"),
},
{ test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader?limit=10000&minetype=application/font-woff&name=./fonts/[name].[ext]' },
{ test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'file-loader?name=./fonts/[name].[ext]' },
{
test: require.resolve('adal-angular/lib/adal'),
loader: 'expose-loader?AuthenticationContext'
},
{
test: /\.js$/,
enforce: "pre",
loader: 'source-map-loader'
}
],
},
plugins: [
new webpack.DefinePlugin({
ADMIN_API_URL: JSON.stringify('http://localhost:41118/api/'),
API_URL: JSON.stringify('http://epdapi.tradesolution.no/'),
GLOBAL_ADMIN_URL: JSON.stringify('https://adminapi.tradesolution.no/')
}),
new HtmlWebpackPlugin({
template: './app/layout.html',
filename: 'index.html'
}),
extractCSS,
extractLESS,
new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', filename: './scripts/vendor.bundle.js' }),
new ExtractTextPlugin({ filename: './[name].bundle.css' }),
new AssetsPlugin({
filename: 'webpack.assets.json',
path: './public',
prettyPrint: true
}),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
'window.$': 'jquery',
"window.AuthenticationContext": "AuthenticationContext",
_: 'underscore'
}),
new CopyWebpackPlugin([
{from: './app/**/*.html', to: './'}
]),
new DashboardPlugin()
],
externals: [
{ xmlhttprequest: '{XMLHttpRequest:XMLHttpRequest}' }
],
}
From this picture you can see that the default bootstrap styles are overriding the styles written for the nav-bar.
What i have done so far is to implement all the other css files into one less file, like this:
#import "../tradesolution.css";
#import "../site.css";
#import "../nykladd.css";
#import "for";
#import "kladd.less";
#import "~bootstrap/less/bootstrap";
#import "~bootstrap/less/alerts.less";
#import "~bootstrap/less/mixins/buttons.less";
#import "~font-awesome/less/font-awesome.less";
Then the less file is compiled to css and loaded in the Ztyles.css , but regardless of where I put the imports, my styles are still overridden. I have also tried changing the order of the webpack rules and the order of extractCSS and extractLESS in plugins
I dont think my intended solution is good practice, so any approach to solving this issue is very welcome.
After a while i stumbled over a new css framework postcss they have all kinds of plugins, and with this configuration I got it to work:
{
test: /\.css$/,
use: [
'style-loader',
{ loader: 'css-loader', options: { modules: true, importLoaders: 1 },
loader: 'postcss-loader',
},
]
},
{ test: /\.less$/,
use: extractLESS.extract(
{fallback:'style-loader', use: ['css-loader', 'less-loader']}
)
},
Here are some resources that helped:
https://github.com/postcss/postcss
https://webdesign.tutsplus.com/tutorials/using-postcss-together-with-sass-stylus-or-less--cms-24591
https://github.com/Crunch/postcss-less

How to set material-css with webpack config?

Sorry to bother, because it could be a local problem. But it has been bothering me for days.
Here is my webpack config:
var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: 'dist/',
filename: 'build.js'
},
resolveLoader: {
root: path.join(__dirname, 'node_modules'),
},
module: {
loaders: [
{
test: /\.vue$/,
loader: 'vue'
},
{
test: /\.js$/,
loader: 'babel?{"presets":["es2015"]}',
exclude: /node_modules/
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract(
"style-loader", "css-loader?sourceMap!postcss-loader")
},
{
test: /\.(jpg|png|gif)$/,
loader: "file-loader?name=images/[hash].[ext]"
},
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: "url-loader?limit=10000&minetype=application/font-woff"
},
{
test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: "file-loader"
}
]
},
vue: {
loaders: {
css: ExtractTextPlugin.extract("css"),
}
},
plugins: [
new ExtractTextPlugin("style.css", {
allChunks: true,
disable: false
}),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
})
],
devtool: '#eval-source-map'
}
and my main.js:
import './libs/materialize/js/materialize.js'
import './libs/materialize/css/materialize.css'
Everything is fine, but when I check out the console of Chrome, it tells me this:
localhost/:13 GET http://localhost:3000/dist/dist/2751ee43015f9884c3642f103b7f70c9.woff2
localhost/:13 GET http://localhost:3000/dist/dist/ba3dcd8903e3d0af5de7792777f8ae0d.woff
localhost/:13 GET http://localhost:3000/dist/dist/df7b648ce5356ea1ebce435b3459fd60.ttf
Can you guys help me for this? Big thanks.
You must import define like this.
import 'materialize-css/dist/js/materialize.min.js'
import 'materialize-css/dist/css/materialize.min.css'

Webpack style-loader modules are overriding installed component css

I am using the react-super-select component in a react/redux project that I'm working on.
That project currently uses webpack and style-loader to load my styling:
const path = require('path');
const webpack = require('webpack');
const poststylus = require('poststylus');
module.exports = {
entry: [
'webpack-hot-middleware/client',
'./src/client/index',
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/static/',
},
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
],
module: {
loaders: [{
test: /\.js$/,
loaders: ['babel'],
exclude: /node_modules/,
},
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'url-loader?limit=10000&mimetype=application/font-woff',
},
{
test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'file-loader',
},
{
test: /\.styl$/,
loader: 'style-loader!css-loader?modules!stylus-loader',
}],
},
stylus: {
use: [
poststylus([ 'autoprefixer', 'rucksack-css' ]),
],
},
};
I am finding that this use of style-loader seems to be overriding the styling provided with react-super-select.
Is there a way to configure webpack so that it does not override the style for this component?
Ok, I figured out how to do this -- I created a wrapper component that loaded the css explicitly:
import React, { PropTypes, Component } from 'react';
import ReactSuperSelect from 'react-super-select';
import 'react-super-select/lib/react-super-select.css';
export default class Dropdown extends Component {
render() {
const { options, onChange, ...preferences } = this.props;
return (
<ReactSuperSelect placeholder={preferences.placeholder}
dataSource={options}
onChange={onChange}
searchable={preferences.searchable} />
);
}
}
Dropdown.propTypes = {
options: PropTypes.array.isRequired,
onChange: PropTypes.func.isRequired,
preferences: PropTypes.object.isRequired,
};
and then I added a line to load css in my webpack config:
module: {
loaders: [{
test: /\.js$/,
loaders: ['babel'],
exclude: /node_modules/,
},
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'url?limit=10000&mimetype=application/font-woff',
},
{
test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'file',
},
{
test: /\.styl$/,
loader: 'style!css?modules!stylus',
},
{
test: /\.css$/,
loader: 'style!css',
}],
},

Resources