webpack -- css的loader挖坑

一、入门级挖坑

在项目中使用css的第一步,就是要在webpack里面配置相应的解析loader,因为webpack只能解析js文件,对于.css,.vue,.jsx,.json等这些文件它不会读,所以我们要安装loader来帮助一下
所有loader都是在webpack.config.js文件里的module.rules数组里面配置的
Tips
每个loader都有基本都有两个配置项:
test:正则表达式校验
loader/use:loader后面可以是loader数组,也可以是loader字符串,推荐使用use
还可以使用options来额外配置一些属性:如:

{
    test: /\.jpg$/,
    use: [
        loader: 'url-loader',
        options: {
            limit: 1024,
            name: '[name].[ext]'
        }
    ]
}
npm install css-loader style-loader --save-dev

安装完成后,需要在webpack.config.js的plugins里面配置,否则也没有效果
注意根据vue官方文档,style-loader被替换成了vue-style-loader,虽然用style-loader也能成,不过还是照着官方来吧

plugins: [
    rules: [
        {
            // 正则校验.css后缀的文件
            test: /\.css$/,
            use: [
                'style-loader',
                {
                    loader: 'css-loader',
                    sourceMap: true
                }
            ]
        }
    ]
]

css-loader就是用来解析处理css文件的,style-loader不知道,估计应该是用来处理style标签里面的css样式的,(主要 将css 插入到head 的style 标签中内联)
cssnano是用来压缩css文件的,不过看网上说使用webpack,css-loader自带了,不需要配置,不知道真假,不过后面会提到一个自动插件工具,里面说有一个cssnano
正常按照官方说法,是通过安装uglifyjs-webpack-plugin插件可以实现压缩,不过翻阅网上资料,也有说要安装插件来压缩css的,不管如何,先操作一番试试
安装插件

// 注意这个针对webpack 4.0及以上
npm install optimize-css-assets-webpack-plugin cssnano --save-dev

// webpack 4.0一下要带版本号
optimize-css-assets-webpack-plugin@3.2.0

安装完插件后,需要在webpack.config.js的插件里面配置一下

// 引入插件
const OptimizeCss = require('optimize-css-assets-webpack-plugin')
const cssnano = require('cssnano')

plugins: [
    new OptimizeCss({
        assetNameRegExp: /\.style\.css$/g,
        cssProcessor: cssnano,
        cssProcessorOptions: { discardComments: { removeAll: true } },
        canPrint: true,
    })
],
optimization: {
    minimizer: [new OptimizeCss({})],
}

大致插件配置就是这样,具体选项意思大概如下:

assetNameRegExp:一个正则表达式,指示应优化\最小化的资产的名称。提供的正则表达式针对配置中ExtractTextPlugin实例导出的文件的文件名运行,而不是源CSS文件的文件名。默认为/\.css$/g
cssProcessor:用于优化\最小化CSS的CSS处理器,默认为cssnano。这应该是一个跟随cssnano.process接口的函数(接收CSS和选项参数并返回一个Promise)。
cssProcessorOptions:传递给cssProcessor的选项,默认为 {}
cssProcessorPluginOptions:传递给cssProcessor的插件选项,默认为 {}
canPrint:一个布尔值,指示插件是否可以将消息打印到控制台,默认为 true

二、进阶级挖坑

现在基本上不用最基础的css文件,都会使用预处理器,那么针对预处理器,也要配置相应的loader

1、sass

首先是安装模块

npm install sass-loader node-sass --save-dev

安装好之后就要开始配置,可以在之前的css配置基础上进行,也可以重新配置一个对象

module: {
    rules: [
        {
            test: /\.scss$/,
            use: [
                'vue-style-loader',
                'css-loader',
                'sass-loader'
            ]
        }
    ]
}

sass和scss的区别:sass-loader 会默认处理不基于缩进的 scss 语法。为了使用基于缩进的 sass 语法,你需要向这个 loader 传递选项:

{
    loader: 'sass-loader',
    options: {
        indentedSyntax: true
    }
}

2、less

首先是安装模块

npm install less less-loader --save-dev

安装好之后就要开始配置,可以在之前的css配置基础上进行,也可以重新配置一个对象

module: {
    rules: [
        {
            test: /\.less$/,
            use: [
                'vue-style-loader',
                'css-loader',
                'less-loader'
            ]
        }
    ]
}

3、stylus

首先是安装模块

npm install stylus stylus-loader --save-dev

安装好之后就要开始配置,可以在之前的css配置基础上进行,也可以重新配置一个对象

module: {
    rules: [
        {
            test: /\.styl(us)?$/,
            use: [
                'vue-style-loader',
                'css-loader',
                'stylus-loader'
            ]
        }
    ]
}

三、终极挖坑

css中最烦的就是写兼容了,一个样式要加前缀写四五遍,太坑爹了,所以我们可以在webpack里面配置模块来让它自动添加前缀
安装模块

npm install postcss-loader autoprefixer --save-dev

模块安装完成之后,可以在css里面配置

module: {
    rules: [
        {
            test: /\.scss$/,
            use: [
                'vue-style-loader',
                {
                    loader:  'css-loader',
                    options: {
                        importLoader: 1 // 不知道为什么,就跟着写吧
                    }
                },
                {
                    loader: 'postcss-loader',
                    options: {
                        sourceMap: true
                    }
                },
                'sass-loader'
            ]
        }
    ]
}

注意这里,autoprefixer之前vue项目是有一个postcss.config.js文件,在这里面配置
但是按照这个配置,似乎并没有看见在哪里引用这个js文件,后面看网上是在optios里面配置一个config
postcss.config.js

// const autoprefixer = require('autoprefixer')
module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}

调用:

{
    loader: 'postcss-loader',
    options: {
        config: {
            path: 'postcss.config.js'
        }
    }
}

但是其实也可以在postcss-loader里面配置

{
    loader: 'postcss-loader',
    options: {
        sourceMap: true,
        plugins: [
            require('autoprefixer')
        ],
    }
}

看网上有说:这个配置main.js里面引入的css找不到,需要配置下面两个,可以试试:

{
    test: /\.(sc|c)ss$/,
    exclude:/node_modules/, // 配置node_module里面的css
    include:'/src/', // 配置src里面的css
}

注意配置完上面的东西,还需要在package.json里面或者postcss.config.js里面配置支持的浏览器,否则可能只会添加-webkit-css
postcss.config.js

module.exports = {
    plugins: {
        autoprefixer: {
            browsers: ['last 7 iOS versions', 'last 3 versions', '> 1%']
        }
    }
}

webpack.config.js
添加一个browserslist数组

module.exports = {
    "browserslist": [
        "defaults",
        "not ie < 11",
        "last 2 versions",
        "> 1%",
        "IOS 7",
        "last 3 IOS versions"
    ]
}

好了,到这里基本上算是结束,上面代码没有是实操过,不知道结果如何,下面是postcss拓展
postcss-cli脚手架
这个脚手架里面包含了很多插件,有兴趣可以看一下gitHub网址

autoprefixer是PostCSS最著名的一款插件,就不过多介绍了,相信同学们都使用过。 
postcss-cssnext (内置autoprefixer) 允许你使用未来的css语法,如css4(可以理解为css中的Babel) 
postcss-sprites 自动制作雪碧图,不用手动拼接啦,哈哈哈 
cssnano 压缩css代码(如果你是用webpack的话,css-loader集成了cssnano,你不需要再次引入) 
postcss-hash-classname 把转换后的css文件名附上哈希值 
pixrem 将rem转换为px 
postcss-px-to-viewport 将px转换为vh和vw(推荐作为移动端的计量单位,而不是rem) 
postcss-pxtorem 将px转换为rem

安装脚手架

npm install postcss-cli --save-dev

具体如何使用以后再说,关于上面的css配置这样配置完成后,css是加载在js文件里面的,所有需要分离出来成为一个单独的css文件,具体是使用extract-text-webpack-plugin插件实现分离
插件具体用法不说了,分离之后上面的css配置需要改动一下,这个配置是在生产环境下设置,开发环境不需要

{
    test: /\.(sc|c)ss$/,
    use: ExtractTextWebpackPlugin.extract({
        fallback: 'vue-style-loader',
        use: [
            'css-loader',
           {
                loader: 'postcss-loader',
                options: {
                      sourceMap: true,
                }
          },
          'sass-loader'
        ]
    })
}

在插件里面输出css配置

plugins: [
    new ExtractTextWebpackPlugin(
        'styles.[contenthash:8].css'
    )
]
上一篇:shell - 拉取代码部署执行


下一篇:No PostCSS Config found解决办法