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

最后一个@import来自所有style.scss s埋在远处其他文件夹的某个地方。显然，我把所有变量和mixin以及基本的东西高于所有其他使用某些变量的导入。对我来说显而易见的是，为什么在构建过程中我收到错误消息，它无法找到变量。在这种情况下，Webpacks＆＃39; sass-loader定义了@import s的顺序？我该怎么做才能使样式表导入的结构更加清晰？我想实现两个目标：1）分别保留组件和2）使可维护性更轻松。

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

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

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

Answer 1

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

await clientStream.CopyToAsync(ms)

应替换为

autoprefixer-loader?safe=true

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

SCSS @ import使用webpack处理订单

1 个答案: