How to use sass loader with webpack 4? I read a lot about this and most sites recomended to use ExtractTextPlugin, but ExtractTextPlugin doesn't work with webpack 4.
I wrote following webpack.config.js:
const path = require('path');
const ClosureCompilerPlugin = require('webpack-closure-compiler');
module.exports = {
module: {
rules: [
{
test: /\.scss$/,
use: [{
loader: "style-loader"
}, {
loader: "css-loader"
}, {
loader: "sass-loader"
}]
}
]
},
plugins: [
new ClosureCompilerPlugin({
compiler: {
language_in: 'ECMASCRIPT6',
language_out: 'ECMASCRIPT3',
compilation_level: 'ADVANCED'
},
concurrency: 3,
})
]
};
Output .js file works well, but my .scss didn't compile to css. I'm tried to add entry points:
entry: {
stylesheet: path.resolve('src', 'scss/styles.scss'),
main: path.resolve('src', 'index.js')
}
and after this my styles.scss compiles to stylesheet.js, but i not to .css.
Is Sass-loader deprecated? Warning: LibSass and Node Sass are deprecated. While they will continue to receive maintenance releases indefinitely, there are no plans to add additional features or compatibility with any new CSS or Sass features.
sass-loader is a loader for Webpack for compiling SCSS/Sass files. style-loader injects our styles into our DOM. css-loader interprets @import and @url() and resolves them. mini-css-extract-plugin extracts our CSS out of the JavaScript bundle into a separate file, essential for production builds.
Webpack provides an advanced mechanism to resolve files. The sass-loader uses Sass's custom importer feature to pass all queries to the Webpack resolving engine. Thus you can import your Sass modules from node_modules .
javascript - Webpack compile scss to css and minify - Stack Overflow. Stack Overflow for Teams – Start collaborating and sharing organizational knowledge.
You can use [email protected] with Webpack 4, if that fits your requirements.
Version 11.0.0 of sass-loader introduced this minimum webpack 5 supported version breaking change. You can see a changelog at https://openbase.com/js/sass-loader/versions
webpack
4 is not yet capable of outputting standalone *.css
file on its own. To get a separate *.css
file, you need to use the extract-text-webpack-plugin
to pull out all the CSS into its own entry chunk. This is a good tutorial.
You can use mini-css-extract-plugin.
https://github.com/webpack-contrib/mini-css-extract-plugin
I used the same plugin for extracting SASS to CSS using webpack 4 and it's working like a charm.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With