在零部件中导入LESS文件

Import LESS files in components

本文关键字：LESS 文件 导入 零部件      更新时间：2023-09-26

我有了下一个项目结构：

– 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

在索引.js:import '../less/app.less'中，它运行良好。

在FooComponent.js:import '../../less/components/FooComponent.less'中，它不起作用，因为FooComponent.less取决于app.less变量。

我知道我可以在app.less中导入@import "FooComponent.less"。但我认为有一种方法可以在一个地方导入apps.lessindex.js），然后在ComponentName.js导入组件名.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文件中的FooComponent.less。

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

如果它们在文件夹中

import './styles.less';
相关文章：