webpack 处理css

webpack 对css 的各种处理

css 文件处理

css-loader

css-loader的作用主要是解析css文件中的@import和url语句，处理css-modules，并将结果作为一个js模块返回，但是并不能把处理好的样式放在界面上展示，如果要放在界面上展示就需要借助于style-loader

style-loader

经过css-loader的转译，我们已经得到了完整的css样式代码，style-loader的作用就是将结果以style标签的方式插入DOM树中

配置

const path = require('path')
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'main.js',
        path: path.join(__dirname, 'dist')
    },
    module: { 
        rules: [{
            test: /\.css$/,
            use: ['style-loader','css-loader'] // loader 的执行是从右往左执行
        }]
    }
}

注：多个loader执行的时候，是从右往左执行的，如上面代码示例，css-loader 会先执行，执行完毕后会把执行结果给到style-loader，然后style-loader 继续执行，以此类推

less 文件处理

less 是css 的预处理语言，扩展了css 语言，增加了变量、函数等特性
但是浏览器无法识别less代码同样需要我们去使用loader来转换

less-loader

对less文件做转换处理，把less代码转换成浏览器可识别的css代码
less-loader 的原理： 就是调用less 库提供的方法，转译成css代码，所以我们使用less-loader 的时候需要安装less 这个库

安装

yarn add less less-loader --dev

配置

在js中导入less
我们通过less-loader 只能把less代码转成css代码，如果想在浏览器中展示，还需要使用 css-loader 和 style-loader 来进一步处理

const path = require('path')
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'main.js',
        path: path.join(__dirname, 'dist')
    },
    module: { 
        rules: [{
            test: /\.less$/,  // 这里要匹配less 文件
            use: ['style-loader','css-loader'，'less-loader'] // loader 的执行是从右往左执行
        }]
    }
}

css兼容处理

因为css历史包袱的问题，在不同浏览器里我们需要对部分css样式的兼容做进一步的处理
postcss 可以帮助我们对css 进一步的处理，比如 添加浏览器前缀，压缩 合并 css代码等

postcss 的使用

安装
yarn add postcss-cli --dev

命令行使用
npx postcss 要处理的css文件 处理后的css
例
npx postcss ./src/css/index.css ./dist/css/index.css

postcss 的插件

postcss 给我们提供了很多插件，方便我们对css处理
1.autoprefixer :浏览器前缀
2.postcss-import：css样式合并
3.cssnano :对css进行压缩处理
4.postcss-cssnext：css样式降低，低版本的浏览器可以使用
5.stylelint :css语法规范提示
6.postcss-sprites ：自动合成精灵图

postcss 的配置文件

在src 同级目录下 创建postcss.config.js 配置文件

module.exports = {
    plugins:[
        // require('autoprefixer'),
        require('postcss-preset-env') // css 的 polyfill ，可以帮助我们把css新特性转成浏览器可识别的 css代码，有了他可以不使用 autoprefixer 这个插件
    ]
}

postcss-loader

postcss 单独使用只时候外部使用，当我们需要配置直接的脚手架的时候，我们需要把 postcss.config.js 里的配置内容交给 postcss-loader 来处理

module.exports = {
    module: {
        rules: [{
                test: /\.css$/,
                use: [
                    "style-loader",
                   {
                        loader: "css-loader",
                        options: {
                            importLoaders: 1  // 如果css文件有通过@import 或者url 导入的 其他css 文件,先回退到上一个loader去处理 也就是让 postcss-loader 处理好了后在 css-loader 去处理
                        }
                    },
                    "postcss-loader", // 如果没有配置 options 会默认读取 postcss.config.js 里的配置
                ],
            },
            {
                test: /\.less$/,
                use: [
                    "style-loader",
                    "css-loader",
                    {
                        loader: "postcss-loader", // postcss-loader 配置样例
                        options: {
                            postcssOptions: {
                                plugins: [
                                    require("autoprefixer"),
                                    require("postcss-preset-env"),
                                ],
                            },
                        },
                    },
                    "less-loader",
                ],
            },
        ],
    },
};

[

](https://blog.csdn.net/weixin_45172119/article/details/107214110)