通过Webpack将SCSS导入PostCSS

如何解决通过Webpack将SCSS导入PostCSS

我目前正在一个项目中，我必须将一个特定的scss文件导入到css文件之一中，以便可以使用其中的一些变量。该项目将PostCSS与webpack中的加载程序一起使用。

到目前为止，我已经尝试使用an SCSS parser，但这似乎不起作用。

以下代码示例显示了我要对主colors.css文件执行的操作：

@import "@theme-data/build/scss/variables/_darkBlueTheme.scss";

:global .lightGray {
  --textColor: $colorScheme-textColor;
  --graph-axis-label-color: rgba(104,69,0.65);
  --tooltip-textColor: #f5f5f5;
  --tooltip-backgroundColor: #535353;
  --backgroundColor: #d9d9d9;
}

有人知道我如何配置webpack来处理此问题吗？

非常感谢！

解决方法

您将需要2个插件来处理此问题：

npm i -D postcss-easy-import precss

然后更新postcss.config.js

module.exports = {
    plugins: [
        require('postcss-easy-import')({
            path: ["src/css"] //or wherever it should look for relative paths
        }),require('precss'),//.. rest of your plugins
    ]
}

PreCss允许使用scss语法，而PostCss Easy Import允许使用导入语句。导入插件应在列表中排在第一位。

文档：

PostCss轻松导入-https://github.com/trysound/postcss-easy-import （有关选项，请参见幕后使用的postcss导入-https://github.com/postcss/postcss-import）

PreCss-https://github.com/jonathantneal/precss

这将使css文件的行为类似于scss文件，因此您只需将扩展名从scss更改为css，就可以了。

否则，您可以在webpack中为scss编写一条单独的规则，以使用scss loader生成css文件，然后将该css文件导入您的入口点。