1. 安装css加载器

//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']
            })
        },
    ]复制代码