SCSS @import 与 webpack 的处理顺序

Posted 2023-02-22

【中文标题】SCSS @import 与 webpack 的处理顺序

【英文标题】：SCSS @import's processing order with webpack

【发布时间】：2017-01-09 16:54:01

【问题描述】：

webpack 配置了sass-loader 模块来处理.scss 文件。这是配置文件中的块：

  
    test: /\.scss$/,
    loaders: ["react-hot", "style", "css?sourceMap&-minimize", "autoprefixer-loader?safe=true", "sass?sourceMap"]
  ,

你可能已经猜到了，我使用 ReactJS 和 hot-reloader。我希望构建应用程序的方式比不同教程中通常提供的模块化得多（每个组件应该在同一文件夹中有自己的style.scss 文件）。所以目前的文件夹结构是这样的：

_base.scss _variables.scss _components.scss

最后一个将所有style.scsss 中的@imports 埋在远处其他文件夹的某个地方。显然，我将所有变量和 mixins 的导入以及基本的东西置于所有其他使用某些变量的导入之上。对我来说不明显的是为什么在构建过程中我收到错误消息，它找不到变量。 在这种情况下，Webpack 的 sass-loader 如何定义 @imports 的顺序？我应该怎么做才能使样式表导入的结构更清晰？总的来说，我想实现两个目标：1) 分别保留具有自己样式的组件和 2) 减少可维护性的痛苦。

旁注： 我还在考虑一些帮助函数，它们允许在每个捆绑中创建一个新的 @imports 列表：

find ./src/components -iname '*.scss' | sed 's/.\/src/../g' | awk 'print "@import \""$0"\";"' >> $NAME

类似的东西。但根据我的直觉，这不是最好的解决方案:)。

【参考方案1】：

好的，我承认这个问题本身很复杂。所以我最终在整个项目中进行了多项更改，这里至少有一个对我有意义的配置：

autoprefixer-loader?safe=true

应该替换为

postcss

在webpack.config.js 文件中并相应地通过npm 安装。在当前情况下，我修复了@imports 的问题，但是关于自定义 scss 结构的最佳方式的问题，以便任何布局封装布局样式并且每个组件都有自己的样式。会玩，但很高兴听到任何建议。