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"。但我认为可以在一个地方导入 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

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

所以在你的FooComponent.less做这个

@import "../app.less"

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

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

在组件中导入LESS文件

1 个答案: