在组件中导入LESS文件

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 的变量。

我知道我可以在 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项目中如何组织样式的问题。感谢！

- Evgeny Samsonov

---

我的回答有帮助解决你的问题吗？或者你已经想出了自己的解决方案？ :) - Idiot211

Answer 1

请在你的less文件中引入app.less文件，这样可以让你的组件样式文件拥有整个应用程序公共样式内的所有样式。

因此，在你的FooComponent.less文件中执行以下操作：

@import "../app.less"

这样做可以让您编译，您只需要在js文件中导入FooComponent.less。

关于我们如何组织文件的问题，我们使用SASS，并将组件SCSS文件和组件JS文件放在同一个文件夹中，组件SCSS文件从另一个目录导入通用的SCSS文件。

- Idiot211

Answer 2

如果它们在文件夹内部

import './styles.less';

- Sadegh Maasoomi