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@nextcnpm 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‘] ???????????????}) ???????????}, ???????]
webpack.config.js====CSS相关:::css加载器
原文地址:https://www.cnblogs.com/songxia/p/10295830.html