zoukankan      html  css  js  c++  java
  • 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']
                    })
                },
            ]
  • 相关阅读:
    Windows下MySQL多实例运行
    Java中,什么时候用logger.debuge,info,error
    乒乓球(Table Tennis)
    [Delphi]Delphi学习
    [CALL]01
    [转自看雪]新手学习计划
    [JAVA]函数
    [1.1]
    [SQL]课堂记录
    [SYS]VS2010驱动开发配置
  • 原文地址:https://www.cnblogs.com/songxia/p/10295830.html
Copyright © 2011-2022 走看看