关于webpack打包时候的css style重复的问题(less)

Question

最近在用webpack打包css的时候发现这样一个问题：产生很多重复的sytle:

我在写less的时候的确多个less文件都去@import一个'common.less'的文件(不显式声明引用打包的时候就会报错...)

我的目前有关less的配置是这样的：

 {
                test: /\.less$/,
                use: [
                    "style-loader",
                    "css-loader",
                    "postcss-loader",
                    "less-loader",
                ]
},

postcss配置比较简单：

module.exports = {
    plugins: {
        'cssnano': {}
    }
};

想知道有什么办法可以去除这个重复的css style.....

Answer 1

如果你想使用 mixins 或者 extended 的方式引用 common.less 内的代码，可以使用 less 的 @import (reference) 语法解决 @import style 重复的问题

使用方法

@import (reference) 'common.less';

.foo { ... }

less 文档

如果我的答案解决了你的问题，望采纳，有帮助，帮 ? 。