1. 安装:
- //loader 加载器加载 CSS 和 Sass 模块
- cnpm install style-loader CSS-loader node-Sass Sass-loader --save-dev
- //loader 加载器加载 CSS 和 Less 模块
- cnpm install style-loader CSS-loader Less Less-loader --save-dev
- // 样式抽离文件 如果是 webpack4.X 需要加 @next
- // 现在 webpack4.x 支持 mini-CSS-extract-plugin 插件, 但是目前不稳定
- cnpm install --save-dev extract-text-webpack-plugin@next
- cnpm install --save-dev mini-CSS-extract-plugin
2. webpack.config.JS 中使用
- const extractTextWebpackPlugin = require('extract-text-webpack-plugin');
- let cssExtract = new extractTextWebpackPlugin({
- filename: 'css/index.css',
- disable: false
- });
- let sassExtract = new extractTextWebpackPlugin({
- filename: 'css/public.css',
- disable: false
- });
- rules: [
- // 配置 CSS 加载器
- {
- test: /\.CSS$/,
- use: cssExtract.extract({
- fallback: "style-loader",
- use: ["css-loader", "postcss-loader"]
- })
- },
- // 配置 Sass 加载器
- {
- test: /\.SCSS$/,
- use: sassExtract.extract({
- fallback: 'style-loader',
- use: ['css-loader', "postcss-loader", 'sass-loader']
- })
- },
- ]
来源: http://www.bubuko.com/infodetail-2928109.html