CODEWITHSUNDEEP
javascriptreactjslesscomponentswebpack
Evgeny Samsonov
Evgeny Samsonov

Reputation: 2750

Import LESS files in components

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!

Upvotes: 5

Views: 19236

Answers (2)

Sadegh Maasoomi
Sadegh Maasoomi

Reputation: 300

If they were inside a folder

import './styles.less';

Upvotes: 0

Idiot211
Idiot211

Reputation: 848

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.

Upvotes: 2

Related Questions