Details about the configuration of webpack scss and postcss-loader, webpackscss

Details about the configuration of webpack scss and postcss-loader, webpackscss

This article describes the configuration of scss and postcss-loader for webpack. The details are as follows:

Start

npm i sass-loader node-sass postcss-loader autoprefixer

First configure postcss-loader

Postcss is used to add a private prefix to the browser kernel. Currently, postcss has other operations such as px2rem. Postcss can be imagined as babel-core, which is only a control center and mainly a plug-in that is scattered out of it.

/***** Package. json ***** // specify the compatible version of your prefix. // Currently, only the specified-webkit-and-ms-are added. // You can also add or reduce the number of kernel prefixes in a browser with lower or higher compatibility. "Browserslist": ["> 1%", "last 2 versions", "not ie <= 8"]/*****. postcssrc. js *** // Add one. postcssrc. js to specify the plug-in used by postcss. Just like. babelrc is similar to module. exports = {plugins: {"autoprefixer": {}}/ ***** build. js production environment ***/{test :/\. css $/, use: ExtractTextWebpackPlugin. extract ({fallback: 'style-loader ',-use: 'css-loader' + use: ['css-loader ', 'postcss-loader ', 'sass-loader ']})}/***** dev. js Development Environment ***** // in fact, I personally think that {test:/\ can be added in the development environment :/\. css $/, use: ['style-loader ', 'css-loader', 'postcss-loader ']},

Scss Configuration

Add Rules

/**** build.js ****/{  test: /\.scss$/,  use: ExtractTextWebpackPlugin.extract({   fallback: 'style-loader',   use: ['css-loader', 'postcss-loader', 'sass-loader']  })}/**** dev.js ****/{  test: /\.scss$/,  use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader']}

Github

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.