3.postcss

最新推荐文章于 2021-07-27 23:04:53 发布

QHQLemon

最新推荐文章于 2021-07-27 23:04:53 发布

阅读量170

点赞数

分类专栏： webpack 文章标签： webpack less postcss

本文链接：https://blog.youkuaiyun.com/weixin_38022998/article/details/103662422

版权

webpack 专栏收录该内容

8 篇文章

订阅专栏

postcss: postcss 是一个使用 JS 插件来转换 CSS 的工具。这些插件可以支持使用变量，混入(mixin)，转换未来的 CSS 语法，内联图片等操作。

postcss-loader：使用postcss在webpack处理css的加载器

autoprefixer：postcss的插件，用于解析css和增加前缀

cssnano：postcss的插件，压缩css代码

postcss-cssnext：postcss的插件，新的css语法转化成更兼容的css

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    module: {
        rules: [
            {
                test: /\.less$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader',
                {
                    loader: 'postcss-loader',
                    options: {
                        indent: 'postcss',
                        plugins: [
                            require('postcss-cssnext')(),
                            // require('autoprefixer')(),   postcss-cssnext包含了autoprefixer
                            require('cssnano')()
                        ]
                    }
                }
                ,'less-loader']
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin()
    ],
    mode: 'development'
}