在组件中导入 LESS 文件答案

【问题标题】：Import LESS files in components在组件中导入 LESS 文件
【发布时间】：2016-09-05 19:14:53
【问题描述】：

我已经有了下一个项目结构：

– 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 项目中组织样式。谢谢！

【问题讨论】：

我的回答帮助解决了您的问题，还是您提出了自己的解决方案？ :)

标签： javascript reactjs less components webpack

【解决方案1】：

让您的 less 文件在其中导入您的 app.less 文件，这将允许您的组件样式文件包含整个通用应用样式中的所有样式。

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

@import "../app.less"

这应该允许你编译，并且你只在你的 js 文件中导入 FooComponent.less。

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

【讨论】：