course webpack SASS

Install Sass

Install through the package manager of Node.js. Yarn is used here

 yarn add node-sass -g node-sass -v node-sass 4.5.1 (Wrapper) [JavaScript] libsass   3.5.0.beta.2   (Sass Compiler) [C/C++]

Use SASS

Here with node-sass For example, use it on the terminal node-sass Command to compile the written scss file into a css file, as follows

 node-sass src/style.scss dest/style.css

If you need to modify the scss frequently and see the conversion effect immediately, then

 node-sass src/style.scss dest/style.css -w

For more help, see below

 node-sass --help

Cooperate with webpack2

To view the official document, there is the following paragraph. The settings are as follows

The sass-loader requires node-sass and webpack as peerDependency. Thus you are able to control the versions accurately.

Open your package.json , add the following code at the appropriate location

 "peerDependencies": { "node-sass": "^4.0.0", "webpack": "^2.0.0" },

Suppose you have installed webpack2 and webpack dev server, and then you need to install some loaders, as shown below, and then execute the following command on the terminal

 yarn add node-sass sass-loader css-loader style-loader --dev

Style Tag Inline

to configure webpack.config.js

 module.exports = { module: { rules: [ { test: /\.(scss|css)$/, use:[ 'style-loader','css-loader','sass-loader'], }, ], }, };

Style tag outreach

Install plug-ins first

 yarn add extract-text-webpack-plugin --dev

Then modify the configuration webpack.config.js by

 const ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = { module: { rules: [ { test: /\.(scss|css)$/, use: ExtractTextPlugin.extract({ use:[ 'css-loader','sass-loader'], fallback: 'style-loader', }), }, ], }, plugins: [ new ExtractTextPlugin({ filename: 'index.css', disable: false, allChunks: true, }), ], };

Support CSS Modules

Modify the configuration webpack.config.js to

 module: { rules: [ { test: /\.(scss|css)$/, use: ExtractTextPlugin.extract({ use:[ { loader: 'css-loader', options:{ modules:true, importLoaders:1, localIdentName:'[local]_[hash:base64:5]', sourceMap: true, }, }, { loader:'sass-loader', options:{ sourceMap: true, }, }, ], fallback: 'style-loader', }), }, ], },

error handling

If you have the following problems when running the project

 Module build failed: Error: ENOENT: no such file or directory

Because Yarn has no command related to rebuild（ Someone has made suggestions )

The repair here needs to use npm to execute npm rebuild node-sass Can be solved

reference resources

• github.com/webpack-contrib/sass-loader/blob/master/package.json
• github.com/sass/node-sass
• webpack.js.org/loaders/sass-loader/

Not much content, so far~

This article is written by Chakhsu Lau Creation, adoption Knowledge Sharing Attribution 4.0 International License Agreement.
All articles on this website are original or translated by this website, except for the reprint/source. Please sign your name before reprinting.