reactjs - 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 基本 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 文件转换为内联样式。在许多情况下，这有助于提高感知性能和首次绘制。

Read more about it here .