webpack.config.js====CSS相關：css和scss配置loader

更多內容已經遷移至掘金，歡迎來指導學習：
https://juejin.im/post/5d64c8665188255d827cedb1

 

 

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'] }) }, ]