Webpack 和 sass-loader 文件导入顺序

Question

我正在对 React 做一些调查，并开始尝试使用 sass-loader 进行 CSS/SCSS 模块处理。我已经完成了大部分设置，但我遇到了一个我不太确定如何解决的问题，我在以下场景中展示了它：

ComponentA.jsx

import React from 'react';
import ComponentB from './app/components/ComponentB.jsx';

// Importing Core CSS module for component A
require("./ComponentA.scss");

export default class ComponentA extends React.Component{

  constructor(){
    ...
  }

  render(){
    return (
      <div>
          <ComponentB />
      </div>
    );
  }
}

ComponentB.jsx

import React from 'react';

// Importing CSS module for component B with some overriding content for component A
require("./ComponentB.scss");

export default class ComponentB extends React.Component{

  constructor(){
      ...
  }

  render(){
    return (
      ...
    );
  }
}

webpack.config.js

var path = require("path");
var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  devServer: {
    contentBase: path.join(__dirname, "../build")
  },
  entry: path.join(__dirname,"../app/ComponentA.jsx"),
  module:{
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel', 
        query: {
          presets: ['react', 'es2015']
        }
      },
      { 
        test: /\.(scss|css)$/, 
        loader: ExtractTextPlugin.extract(['css','sass'])
      },
      ...
    ]
  },
  output: {
    path: path.join(__dirname, "..", "build"),
    filename: "bundle.js",
    publicPath: "/"
  },
  plugins: [
    new ExtractTextPlugin(
      "style.css", 
      { allChunks: true }
    )
  ]
};

从这个设置开始，Webpack 按预期工作并创建了新文件 style.css（当然实际上是因为我正在开发），但是...... SCSS 内容文件未按照我认为的顺序呈现。

结果style.css内容排列为：

ComponentB.scss内容
ComponentA.scss内容

而不是：

ComponentA.scss内容
ComponentB.scss内容

正如我的意思，它在层次结构中。这是一个问题，关于覆盖 Component A base CSS 我需要 webpack 和 sass-loader 来按层次结构顺序合并文件。

所以，这之后的问题是：

如何配置 sass-loader 在它经过树时加载模块？

甚至更简单...

有更好的方法吗？

Answer 1

即使涉及样式表，您也需要将 React 中的组件视为独立的实体。它不仅与 JavaScript 和 JSX（或一般标记）有关，而且与 CSS（或 SCSS）有关。

这就是为什么通常首选的方法是使用本地 CSS 以及最低限度的全局样式。我建议你在你的情况下做同样的事情：在全局范围内移动 ComponentA 和 ComponentB 中的一些样式（你可以认为它是关键 CSS），并为每个覆盖它们的局部样式。

使样式本地化的方法是添加 :local 前缀，也许包裹在容器中（即 ComponentA），如下所示：

:local(.ComponentA) { 
  background: red;

  & > img{
    width: 100%;
  }
}

值得一提的是，这会将您的 SCSS 文件转换为内联样式。在许多情况下，这有助于提高感知性能和首次绘制。

Webpack 和 sass-loader 文件导入顺序

Webpack and sass-loader files import order

reactjs

webpack

sass-loader

react-css-modules