WebpackとSass-Loaderファイルのインポート順

Question

Reactについて少し調べて、CSS/SCSSモジュール処理のためにsass-loaderを試し始めました。 Iすでに完全なセットアップのほとんどをしましたが、私は私が対処する方法が本当にわからない問題を抱えて、私は次のシナリオでそれを提示：

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> 
    ); 
    } 
} 

webpack.config.js

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 (
     ... 
    ); 
    } 
} 

このセットアップから

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の内容

私はそれが階層にあることを意味しました。これは、コンポーネントAベースCSSをオーバーライドする場合、階層順でファイルをマージするためにwebpackとsass-loaderが必要になるという点で問題です。

ので、この後のご質問は、次のようになります。

私はそれが木の上を通過する際に、モジュールをロードするためにSASS-ローダーを設定するにはどうすればよいですか？

またはさらに簡単な...

これを行うには良い方法はありますか？

Answer 1

スタイルシートの場合でも、リアクションは自己完結したエンティティとして考える必要があります。 JavaScriptやJSX（または一般的なマークアップ）だけでなく、CSS（またはSCSS）もそうです。

これは、ローカルスタイルの最小限のものとともに、ローカルCSSを使用することが望ましい理由が多いためです。私は、あなたが同じことをすることをお勧めします：あなたはそれをクリティカルなCSSと考えることができる、グローバルスコープでComponentAとComponentBのいくつかのスタイルを移動し、それぞれをオーバーライドするローカルスタイルを持っています。

スタイルをローカルにする方法は、おそらくコンテナに包まれた:localという接頭辞を追加することです（つまり、あなたのSCSSファイルがインラインスタイルに変換されることに言及する価値はあります。多くの場合、それは認識されたパフォーマンスと最初のペイントに役立ちます。

Read more about it here。