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