发布CSS不转换自定义属性

Question

我有一个使用webpack的项目，该项目利用了PostCSS加载程序和代码拆分功能。使用以下方法，使用SASS加载程序将模块的CSS直接导入到入口点中。

import '@/css/modules/components/_accordion.scss'

某些模块使用CSS自定义属性，这些属性在上面导入的同一入口点的单独模块中声明。

import '@/js/modules/common'

这很好，但是，只有公共模块中使用的自定义属性可以按照PostCSS加载程序的期望转换为已编译CSS中的十六进制值，而不是随后导入入口点的其他SASS模块中使用的属性。 _accordion.scss。

作为一种解决方法，为了使它们转换，我目前正在导入每个SASS模块顶部包含自定义属性的文件。

@import "css/tools/variables/colors";

但这意味着自定义属性声明在多个CSS文件（块）中重复。

我想要一个避免在已编译的CSS中重复声明的解决方案，同时确保所有自定义属性均按PostCSS的期望进行转换。

Answer 1

您可以尝试使用CSS自定义属性预处理器，例如postcss-css-variables，postcss-custom-properties或postcss-simple-vars将CSS变量转换为静态表示形式。

Answer 2

使用css-loader可以解决重复项，但是无论出于何种原因，

Webpack ExtractTextPlugin - avoid duplicate classes in output css

Answer 3

您需要添加PostCSS插件来转换CSS自定义属性，例如postcss-preset-env

npm install css-loader postcss-loader postcss-preset-env --save-dev

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [ 'style-loader', 'postcss-loader' ]
      }
    ]
  }
}

postcss.config.js

module.exports = {
  plugins: {
    'postcss-preset-env': {},
  }
}

当然，您可以在两者之间添加其他装载程序，例如Sass或Less。

参考：

• css-loader
• postcss-loader
• postcss-preset-env