Javascript 在组件中导入较少的文件

我有下一个项目结构：

– 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：

导入“../less/app.less”

中，它可以正常工作

在FooComponent.js：

import'../../less/components/FooComponent.less'

-它不起作用，因为FooComponent.less取决于app.less的变量

我知道我可以在app.less中导入“FooComponent.less”。但是我认为有一种方法可以在一个地方导入app.less（index.js），然后在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项目中组织你的风格的。

---

谢谢

让你的less文件导入你的app.less文件，这将允许你的组件样式文件包含整个常用应用样式中的所有样式

因此，在您的FooComponent.less中，请执行此操作

@import "../app.less"

这将允许您进行编译，并且只在js文件中导入foomponent.less

---

为了回答您关于我们如何构造文件的问题，我们使用SASS，将组件SCSS文件和组件JS放在同一文件夹中，组件SCSS文件从另一个目录导入通用SCSS文件。

我的回答有助于解决您的问题，还是您提出了自己的解决方案？：）