I'm trying to get sass compilation to work with webpack using sass-loader and autoprefixer and postcssloader. The sass compilation is working successfully. However following along with the documentation for autoprefixing isn't working:
Add PostCSS Loader to webpack.config.js. Put it before css-loader and style-loader. But after sass-loader, if you use it.
So with just sass working, I had
loaders: [
{
test: /\.scss$/,
loaders: ["style", "css", "sass"]
}
],
sassLoader: {
includePaths: [path.resolve(__dirname, "./build")]
}
But reading the above, it seems like what I need is something like this.
'loaders': [
{
test: /\.scss$/,
loaders: ["sass"]
},
{
test: /\.css$/,
loaders: [
'style-loader',
'css-loader?modules&importLoaders=1',
'postcss-loader'
]
},
{
test: /\.scss$/,
loaders: ["style", "css"]
}
],
sassLoader: {
includePaths: [path.resolve(__dirname, "./build")]
}
Also regarding:
Then create postcss.config.js:
I have made that file and put this inside
module.exports = {
plugins: [
require('precss'),
require('autoprefixer')
]
}
However, I get the following error
Invalid CSS after "...load the styles": expected 1 selector or at-rule, was "var content = requi" in /path/to/scss/index.scss
and everything breaks. What's wrong with this configuration?
For my project, I arranged loaders in the following order to make it work with scss files.
loaders: [
'css-loader?modules&importLoaders=1',
'postcss-loader',
'sass-loader'
]
I found success with doing something like this:
module.exports = {
module: {
loaders: [
{
test: /\.jsx$/,
exclude: /node_modules/,
loader: "babel-loader",
query: { presets: ["es2015", "stage-0", "react", "react-hmre" ]}
},
{
test: /\.scss$/,
loaders: ["style-loader", "css-loader", "postcss-loader", "sass-loader"]
}
]
},
postcss: function() {
return [
require('precss'),
require('autoprefixer')
];
}
};
Related
I'm using the new version of Ecma Script preset in Webpack 4 but It still throws the error.
(currently, my bundle.js file size is about 5MB and it's so huge. In addition to UglifyJs, please let me know any other advice to decrease bundle size in Webpack 4 and ReactJs if you know)
Here is the error:
ERROR in bundle.js from UglifyJs
Unexpected token: keyword (const) [bundle.js:4981,0]
and here is my Webpack config:
{
...
...
module: {
rules: [
{
query: {
presets: ['react', 'env', 'stage-3'],
compact: false
},
test: /\.js$/,
loader: 'babel-loader',
exclude: /(node_modules|bower_components)/
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'sass-loader']
})
},
{
test: /\.(eot|otf|ttf|woff|woff2)$/,
loader: 'file-loader?name=./fonts/[name].[ext]'
},
{
test: /\.(jpg|jpeg|png|gif|svg)$/,
loader: 'file-loader?name=./images/[name].[ext]'
},
{
test: /\.css$/,
exclude: /node_modules/,
include: [
resolve(__dirname, "not_exist_path")
],
loader: 'style-loader!css-loader'
},
]
},
...
...
optimization: {
minimizer: [new UglifyJsPlugin()]
},
}
What am I doing wrong? where is the problem?
I want to include a file twice through two different loaders. The reasoning is I want to display code snippets in ES6 while allowing them to be run in browsers not supporting the syntax.
Effectively what I would like to achieve is the below but with both loaders results being included in the output -
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: "babel-loader"
},
{
test: /\.(js|jsx)$/,
include: /app\/examples/,
use: [
{
loader: "file-loader",
options: {
regExp: /app\/examples\/([^\/]+)\/([^\.]+)+\.jsx?$/,
name: 'examples/[1]/[2].example',
}
}
]
}
With the above in my webpack config
import example from '../../examples/simple/ex1'
results in
Module {default: "examples/simple/ex1.example", __esModule: true, Symbol(Symbol.toStringTag): "Module"}
Rather than the code run through babel as I would have hoped for.
const multi = require('multi-loader');
const combineLoaders = require('webpack-combine-loaders');
module: {
loaders: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
include: /app\/examples/,
loader: multi(combineLoaders([
{ loader: 'file-loader' },
{ loader: 'babel-loader' },
]))
},
]
}
This should do the trick. you have to also use combineLoaders as you have to use options object. inside combine loaders array you can pass loader configuration also.
I couldn't manage to handle this with loaders in the end - although with further reading I don't believe this was the correct approach anyway. Instead i'm now using copy-webpack-plugin to copy the files -
plugins: [
new CopyWebpackPlugin([ {
from: path.join(rootDir, 'app', 'examples'),
to: path.join(outputDir, 'examples')
}])
],
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: "babel-loader"
}
]
}
in my react app I want to use fontawesome css files with webpack and the css loaders. my configuration looks like this:
webpack config
module: {
rules: [
{
test: /\.js?$/,
loader: 'babel-loader',
options: {
presets: [
["es2015", { modules: false }],
"stage-2",
"react"
],
plugins: [
"transform-node-env-inline"
],
env: {
development: {
plugins: ["react-hot-loader/babel"]
}
}
}
}, {
test: /\.(eot|ttf|woff2?|otf|svg|png|jpg)$/,
loaders: ['file']
},
{
test: /\.css$/,
use: [
"style-loader",
{
loader: "css-loader",
options: {
modules: true,
sourceMap: true,
importLoaders: 1,
localIdentName: "[name]--[local]--[hash:base64:8]"
}
},
"postcss-loader" // has separate config, see postcss.config.js nearby
]
},
]
in index.js I have this:
import 'font-awesome/css/font-awesome.css';
and in the render method i have this:
<li><NavLink to="/dashboard" className="fa fa-bars" activeClassName="activeSidebar"
aria-hidden="true"></NavLink></li>
There are noe errors, but also no icons displayed ... whats my mistake?
Thanks
You may need to add a name argument to the loader that handles the font files.
eg:
...
{
test: /\.(eot|ttf|woff2?|otf|svg|png|jpg)$/,
loader: 'file-loader?name=./[name].[hash].[ext]'
},
...
If you're working with Webpack 2, you should always add the -loader suffix after each loader's name. Here's my portion of code that works correctly in my webpack.config.js:
{
test: /\.(png|woff|woff2|eot|ttf|svg)$/,
use:[{
loader: 'url-loader',
options:{
limit: 100000,
name: 'assets/resources/[name].[ext]'
}
}]
}
I'm using url-loader, but in this case it should work with file-loader too.
well, in my case, I shall add a small pattern after the extension for the url-loader and some include / exclude instructions.
This is because we want to have different tools for our css and imported ones.
The pattern added in url-loader is to handle import from font-awesome.css because they look like : src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
Here is the extract of my webpack.config.js file :
{
test: /\.css/,
loaders: [
'style-loader',
`css-loader?${JSON.stringify({
sourceMap: isDebug,
// CSS Modules https://github.com/css-modules/css-modules
modules: true,
localIdentName: isDebug ? '[name]_[local]_[hash:base64:3]' : '[hash:base64:4]',
// CSS Nano http://cssnano.co/options/
minimize: !isDebug,
camelCase: 'dashes',
})}`,
'postcss-loader',
],
exclude: [
path.resolve(__dirname, './node_modules/font-awesome'),
],
},
// ...
{
test: /\.css/,
loaders: [
'style-loader',
'css-loader',
],
include: [
path.resolve(__dirname, './node_modules/font-awesome'),
],
},
// ...
{
test: /\.(png|jpg|jpeg|gif|woff|woff2)(\?.*$|$)/,
loader: 'url-loader?limit=10000',
},
Solution that worked for me is to add the css files in my www/index.html
then I can use the css like this:
<div className={`row`}>
Same with bootstrap and fontawesome
What's wrong with my code below? I got error bundling less files, for example
ERROR in ./~/less-loader!./resources/assets/js/bundle/components/widget/clock.less
Below is my webpack.config.js
module: {
loaders: [
{
test: /\.js?$/,
exclude: /node_modules/,
loaders: ["react-hot", "babel-loader","babel?presets[]=react,presets[]=es2015,presets[]=stage-0"],
},
{
test: /\.less$/,
loaders: ['style-loader','less-loader']
}
]
}
I'm trying to implement hot reloading.
If you're using webpack v1:
module: {
loaders: [
{
test: /\.js?$/,
exclude: /node_modules/,
loaders: ["babel-loader","babel?presets[]=react,presets[]=es2015,presets[]=stage-0"],
},
{
test: /\.less$/,
loaders: ['style-loader','css-loader', 'less-loader']
}
]
}
or if you're using webpack v2:
module: {
rules: [
{
test: /\.js?$/,
exclude: /node_modules/,
use: ["babel-loader","babel?presets[]=react,presets[]=es2015,presets[]=stage-0"],
},
{
test: /\.less$/,
use: ['style-loader','css-loader', 'less-loader']
}
]
}
As your webpack is reaching the less-loader, I don't see any issue in configuration. Otherwise it prompts issue with webpack configuration.
Now you need to check your file here resources/assets/js/bundle/components/widget/clock.less
It is the place which is having issues.
If not please share complete error, this is just the first line of error.
I use webpack to build a server build, the config looks like:
loaders: [
{
test: /\.js$/,
exclude: [/node_modules/],
loader: "babel-loader",
query: {
presets: ["es2015", "react"],
plugins: ["transform-object-rest-spread"]
}
}, {
test: new RegExp(`/
stardust
|redux-form
|axios
|shuffle
`),
loader: "null-loader"
}
]
Idea is pretty simple: if something matches regexp in the second loader, it shouldn't be loaded. It works well until I'm loading this:
import shuffle from "shufflejs/dist/shuffle.min.js"
It matches to both loaders and loaded to the bundle. How can I make null-loader precedence higher than the babel?
You can use pre-loaders as described in webpack documentation basically you will use your regex with null-loader as a pre-loader this way it will be resolved before your loaders. So, if regex matches null-loader will be used and it won't load the module.
Here's the modified code:
preLoaders: [
{
test: new RegExp(`/
stardust
|redux-form
|axios
|shuffle
`),
loader: "null-loader"
}
],
loaders: [
{
test: /\.js$/,
exclude: [/node_modules/],
loader: "babel-loader",
query: {
presets: ["es2015", "react"],
plugins: ["transform-object-rest-spread"]
}
}
]
The only other solution I can think of is to rely on regular expressions to exclude files containing these word. I'm not an expert in Regex but I'll try to suggest an expression:
loaders: [
{
test: /^(?!stardust|redux-form|axios|shuffle)([a-zA-Z]+)\.js$/,
exclude: [/node_modules/],
loader: "babel-loader",
query: {
presets: ["es2015", "react"],
plugins: ["transform-object-rest-spread"]
}
}
]