Load Styles in WebPack

Question

Is there a way to try to load xx.less for every xx.js being loaded?

For now, we add require 'xx.less' at the top of every relevant js file and it a little ugly.

Answer 1

What I ended doing was improving the imports loader to add an option to import a less file for every jsx file with the same name if it exists.

My improved import loader: https://github.com/welldone-software/imports-loader

The pull request: https://github.com/webpack/imports-loader/pull/12

For example dropping mainview.less in the same directory as mainview.jsx, would add a require("mainview.less") import to the top of the jsx file:

loaders: [
    { test: /\.jsx?$/, loaders: ['imports?null=[./{name}.less]', 'react-hot', 'babel'] },
    { test: /\.less$/, loader: 'style!css!less' }
]