Webpack 和 sass-loader 文件导入顺序

Posted 2023-02-22

【中文标题】Webpack 和 sass-loader 文件导入顺序

【英文标题】：Webpack and sass-loader files import order

【发布时间】：2017-02-19 06:57:59

【问题描述】：

我正在对 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 以在模块通过树时加载模块？

甚至更简单...

有更好的方法吗？

【参考方案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.

【讨论】：

感谢您的回答！我在您提供的信息中阅读了有关 local-css 的信息。对于我提供的场景来说，这似乎很有趣且实用。

（抱歉重复发布，没有完成上一条评论的想法） 现在，试图获得更广泛的图片......我明白了ExtractTextPlugin 的创建是为了分离和缩小组件使用的 CSS 数据。在这种情况下，这不是违背了“要求”CSS 页面的目的吗？或者简单地说，内联 CSS 会更好吗？

您仍然可以使用require 并在所需的CSS 文件中添加:local，用于应该本地化的类。编译时它将被内联，但您不必担心。当然，这样做的好处是，CSS 文件不会加载到您的所有页面上，而只会加载到需要它的页面上。 Here 有一些关于它的资料，如果您想了解更多。

顺便说一下，如果你觉得这个答案有帮助，请accept it & vote up。谢谢！ :)