SCSS @import 与 webpack 的处理顺序

Question

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

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

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

_base.scss
_variables.scss
_components.scss

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

旁注： 我还考虑了一些辅助函数，这些函数允许在每个捆绑上创建一个新的 @import 列表：

find ./src/components -iname '*.scss' | sed 's/.\/src/../g' | awk '{print "@import \""[=11=]"\";"}' >> $NAME

像这样。但根据我的直觉，这不是最佳解决方案 :) .

Answer 1

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

autoprefixer-loader?safe=true

应替换为

postcss

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

SCSS @import 与 webpack 的处理顺序

SCSS @import's processing order with webpack

sass

webpack

sass-loader