0

webpack は、ファイルsass-loaderを処理するモジュールで構成されてい.scssます。構成ファイルのチャンクは次のとおりです。

  {
    test: /\.scss$/,
    loaders: ["react-hot", "style", "css?sourceMap&-minimize", "autoprefixer-loader?safe=true", "sass?sourceMap"]
  },

ご想像のとおり、私は ReactJS と hot-reloader を使用しています。アプリを構築する方法は、通常、さまざまなチュートリアルで提供されるよりもはるかにモジュール化されています (各コンポーネントstyle.scssには、同じフォルダーに独自のファイルが必要です)。したがって、現在のフォルダーの構造は次のようになります。

  • _base.scss
  • _変数.scss
  • _components.scss

そして最後のものには、遠く離れた他のフォルダーのどこかに埋もれて@importいるすべての s からのs があります。style.scss明らかに、変数とミックスインのすべてのインポートと基本的なものを、いくつかの変数を使用する他のすべてのインポートの上に置きます。明らかに、ビルド プロセス中に変数が見つからないというエラー メッセージが表示されるのはなぜですか。この場合、Webpackssass-loaderは s の順序をどのように定義し@importますか? また、スタイルシートのインポートの構造をより明確にするにはどうすればよいですか? 私は一般的に 2 つの目標を達成したいと考えています。

補足:@import各バンドル で s の新しいリストを作成できるいくつかのヘルパー関数も検討しています。

find ./src/components -iname '*.scss' | sed 's/.\/src/../g' | awk '{print "@import \""$0"\";"}' >> $NAME

このようなもの。しかし、私の直感によると、それは最善の解決策ではありません:)。

4

1 に答える 1

0

わかりました、質問自体が非常に複雑であることは認めます。そのため、プロジェクト全体で複数の変更が行われました。ここに、私にとって意味のある構成の少なくとも 1 つのチャンクがあります。

autoprefixer-loader?safe=true

に置き換える必要があります

postcss

ファイルに含まれておりwebpack.config.js、それに応じてnpm. 現在のケースでは、@importsの問題を修正しましたが、scss構造をカスタマイズして、レイアウトがレイアウトのスタイリングをカプセル化し、各コンポーネントが独自のスタイリングを持つようにするための最良の方法に関する質問です。遊んでみますが、提案を聞くのは素晴らしいことです。

于 2016-09-13T15:17:55.680 に答える