0

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

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

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

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

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

4

1 回答 1

0

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

autoprefixer-loader?safe=true

应该替换为

postcss

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

于 2016-09-13T15:17:55.680 回答