在 Reacts 组件之上加载 common.sass 样式

Question

我正在使用 SASS 为样式构建一个 react 应用程序，并使用 webpack-dev-server 为其提供服务，几个组件和一些结构摘录如下所示：

├── App.js
├── components
│   ├── Layout.jsx
│   ├── Layout.scss
│   ├── header
│   ├── pages
│   └── footer
└── css
    ├── _vendors.scss
    ├── _variables.scss
    ├── _mixins.scss
    └── utils.scss

在main.scss 里面，我有所有的@imports，在供应商里面我有 node_modules 依赖项中的导入，等等...... 每个反应组件都有自己的 scss 文件。 但是，我希望将 main.scss 加载到 Layout.jsx 中，并在每个组件的 scss 文件中使用 mixins 或导入或占位符类。

我正在尝试使用 includePath 使用 css-loader 和 style-loader，但没有成功。

这可能吗？它与webpack的-loaders有关吗？ ps：有一个.html文件是不可行的，这是一个组件库。

Answer 1

我发现跟踪各种 React 组件的样式的一个好方法是为每个相应的组件创建一个样式文件。所以Header.react.jsx 会有一个对应的Header.sass。然后你只需将样式文件包含在 react 组件之上，就像这样（使用 ES6 语法）：

import './Header.sass';

要让它与 webpack 一起工作，你需要合适的加载器：

loaders: [
    {
        test: /\.sass/,
        loader: 'style!css!autoprefixer!sass'
    }
]

这非常适合开发，因为样式是在 javascript 中加载的，并且如果您使用热加载器，任何更改都会自动更新，但在生产中，您希望将 css 文件与所有样式分开.您可以使用单独的 webpack 配置文件来执行此操作，如下所示：

plugins: [
    new ExtractTextPlugin('bundle.css', { allChunks: false })
],
loaders: [
    {
        test: /\.scss/,
        loader: ExtractTextPlugin.extract(
            'style-loader',
            'css!autoprefixer!sass'
        )
    }
]

以这种方式做事时，最好包含一个 sass 配置文件和一个 mixin 文件，用于全局使用的变量或 mixin（使用常规 sass @import）。重要的是不要在您导入的文件中定义任何实际样式，因为这些样式将包含在您包含它的所有文件中，从而导致大量重复。

这对组件库（正如您所说的那样）有好处，因为 webpack 只会包含您在应用程序中使用的 react 组件，而反过来，它只会拉入您使用的 sass 文件。

我发现这种方法非常方便，并在较小的应用程序here 中使用了它。如果我解释得不够清楚，请看一下。