3

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

组件A.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>
    );
  }
}

组件B.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 以在模块通过树时加载模块？

甚至更简单...

有一个更好的方法吗？

4

1 回答 1

1

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

这就是为什么通常首选的方法是使用本地 CSS 以及最少的全局样式。我建议您在您的情况下也这样做：将 ComponentA 和 ComponentB 中的一些样式移动到全局范围内（您可以将其视为关键 CSS），并为每个样式设置覆盖它们的本地样式。

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

:local(.ComponentA) { 
  background: red;

  & > img{
    width: 100%;
  }
}

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

在此处阅读更多相关信息。

于 2016-10-10T22:01:59.257 回答