インポートLESS私は次のプロジェクト構造を持っている

Question

コンポーネント内のファイル：index.jsで

– js 
    |-- index.js // the entry point 
    |-- components 
     |-- FooComponent.js // example component 
- less 
    |-- app.less // common styles for the entire app (scaffolding, variables) 
    |-- components 
     |-- FooComponent.less // styles for a specific component 

：import '../less/app.less' - それは正常に動作します。 FooComponent.jsで

：import '../../less/components/FooComponent.less' - それは動作しません、FooComponent.lessがapp.lessの変数に依存するため。

私はのの@import "FooComponent.less"を知っています。しかし、私は一つの場所（index.js）にapp.lessをインポートし、ComponentName.js、そうでないかでComponentName.lessをインポートする方法があると思いますか？

webpack.config.js：

module.exports = { 
    entry: './app/js/index.js', 
    ... 
    module: { 
     loaders: [ 
      { 
       test: /\.less$/, 
       exclude: /node_modules/, 
       loader: 'style!css!less' 
      }, 
      ... 
     ] 
    } 
}; 

また、私はあなたがReact.jsプロジェクトで、あなたのスタイルを整理する方法を知りたいのです。 ありがとう！

Answer 1

ファイルを少なくして、その中にapp.lessファイルをインポートすると、コンポーネントのスタイルファイルに共通のアプリスタイル全体のすべてのスタイルを含めることができます。

だからあなたFooComponent.lessにこの

@import "../app.less" 

これは、あなたがコンパイルできるようにする必要があります、そしてあなたは、あなたのjsファイルにFooComponent.lessをインポートします。

私たちがファイルをどのように構成するかについての質問に答えるために、私たちはSASSを使用し、コンポーネントSCSSファイルとコンポーネントJSを同じフォルダに持ち、コンポーネントSCSSファイルは共通SCSSファイルを別のディレクトリからインポートします。