Import LESS files in components

Question

I've got the next project structure:

– 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

In the index.js: import '../less/app.less' – it works fine.

In the FooComponent.js: import '../../less/components/FooComponent.less' – it doesn't work, because FooComponent.less depends on the variables of app.less.

I know I can @import "FooComponent.less" in the app.less. But I think there's a way to import app.less in one place (index.js), and then import ComponentName.less in ComponentName.js, or not?

webpack.config.js:

module.exports = {
    entry: './app/js/index.js',
    ...
    module: {
        loaders: [
            {
                test: /\.less$/,
                exclude: /node_modules/,
                loader: 'style!css!less'
            },
            ...
        ]
    }
};

Also I'd like to know how you organize your styles in React.js projects. Thanks!

Answer 1

Have your less file import your app.less file inside of it, this will allow your components style file to have all the styles inside of your entire common app styles.

So in your FooComponent.less do this

@import "../app.less"

This should then allow you to compile, and you only import the FooComponent.less in your js file.

To answer your question about how we structure our files, we use SASS and have the component SCSS file and the component JS in the same folder, and the component SCSS file imports the common SCSS file from another directory.