Импорт МЕНЬШЕ файлы компонентов

Question

я получил следующую структуру проекта:

– 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 

В index.js: import '../less/app.less' - он отлично работает.

В FooComponent.js: import '../../less/components/FooComponent.less' - это не работает, потому что FooComponent.less зависит от переменных app.less.

Я знаю, что могу @import "FooComponent.less" в app.less. Но я думаю, что есть способ импортировать app.less в одном месте (index.js), а затем импортировать ComponentName.less в ComponentName.js, или нет?

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" 

Это должно затем позволит вам компилировать и импортировать только FooComponent.less в файле JS.

Чтобы ответить на вопрос о том, как мы структурируем наши файлы, мы используем SASS и имеем компонент SCSS-файл и компонент JS в той же папке, а компонент SCSS-файла импортирует общий файл SCSS из другого каталога.