码迷,mamicode.com
首页 > Web开发 > 详细

webpack.config.js====CSS相关:::css加载器

时间:2019-01-20 20:08:00      阅读:236      评论:0      收藏:0      [点我收藏+]

标签:node   const   样式   ble   col   load   加载   webp   extract   

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加载器

标签:node   const   样式   ble   col   load   加载   webp   extract   

原文地址:https://www.cnblogs.com/songxia/p/10295830.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!