在组件中导入 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。

我知道我可以@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

让您的 less 文件在其中导入 app.less 文件，这将允许您的组件样式文件具有整个常见应用程序样式中的所有样式。

所以在你的 FooComponent.less 中这样做

@import "../app.less"

然后，这应该允许您进行编译，并且您只需在 js 文件中导入 FooComponent.less 即可。

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