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文件。但是，我希望在Layout.jsx中加载main.scss，并在每个组件的scss文件中使用mixins或import或占位符类。

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

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

Answer 1

我发现跟踪各种反应组件的样式的一个好方法是为每个相应的组件创建一个样式文件。因此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中使用它。如果我没有充分解释它，请看看。

在Reacts组件的顶部加载common.sass样式

1 个答案: