webpack.config.js====CSS相關:::css加載器
阿新 • • 發佈:2019-01-20
file let 配置 fig all clas node cnpm sta
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‘]
})
},
]
webpack.config.js====CSS相關:::css加載器