webpack4-css样式处理

最新推荐文章于 2023-06-14 12:08:12 发布

weixin_34080903

最新推荐文章于 2023-06-14 12:08:12 发布

阅读量515

点赞数

文章标签： webpack ViewUI

原文链接：https://juejin.im/post/5c42e3b2f265da61223a9d1e

版权

一 css模块常用的loader:

style-loader：通过注入style标签将CSS添加到DOM
css-loader：css-loader使我们可以在程序中require CSS文件，将css文件当做模块来处理。同时也会遍历 CSS 文件，找到其中的@import与url（），当作css依赖的模块并处理它们。
postcss-loader: 为css样式添加兼容性的浏览器厂商前缀
less-loader：将less编译为css

二将css抽取为单独的文件(webpack 4)

安装mini-css-extract-plugin

yarn add mini-css-extract-plugin
复制代码

项目配置

            {
                test: /\.less?$/,
                exclude: /src/,
                use: [
                    process.env.CODE_ENV !== 'online' ? 'style-loader' : MiniCssExtractPlugin.loader, 
                    {
                        loader: 'css-loader',
                        options: {
                            minimize: true
                        },
                    }, 
                    'postcss-loader', 
                    {
                        loader: 'less-loader',
                        options: {
                            modifyVars: theme
                        }
                    }
                ]
            }
复制代码

注意:

(1) 通过mini-css-extract-plugin插件, 是将css文件抽取出来为单独的文件, 在head头部以link方式引入

(2) 官方文档指出, 此插件一般应用于生产环境; 与style-loader不可同时使用, 尤其是在开发环境中实现热更新的情况下

转载于:https://juejin.im/post/5c42e3b2f265da61223a9d1e