通过 Webpack 将 SCSS 导入 PostCSS答案

【问题标题】：Import SCSS into PostCSS through Webpack通过 Webpack 将 SCSS 导入 PostCSS
【发布时间】：2020-12-21 08:47:47
【问题描述】：

我目前正在处理一个项目，我必须将特定的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, 69, 0.65);
  --tooltip-textColor: #f5f5f5;
  --tooltip-backgroundColor: #535353;
  --backgroundColor: #d9d9d9;
}

有谁知道我可以如何配置 webpack 来处理这个问题？

非常感谢！

【问题讨论】：

为什么你有一个 colors.css 而不是 colors.scss？那一开始不会给你这个问题。
@Kamelkent 这是我从另一个想要使用 postcss“模拟”scss 的开发人员那里接手的项目。

标签： webpack sass postcss

【解决方案1】：

您需要 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 文件导入您的入口点。

【讨论】：