I want to use babel-plugin-react-css-modules with and Less in my project. Actually I use ExtractTextPlugin, Less and css-modules. I dont have clear how to configurate babel-plugin-react-css-modules, i know i have to update my babel configuration but i dont know how to do it. Also I want to continue using Absolute paths to import less files in jsx files, like that:
/*
paths:
app
components
Song
Song.jsx
styles
Util.less
*/
// app/components/Song/Song.jsx
import styles from 'styles/Util.less';
This is my webpack configuration
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const fs = require('fs');
const path = require('path');
const webpack = require('webpack');
const ENVIRONMENT = process.env.NODE_ENV.trim();
let environmentConfig;
let extractLESS;
let isDevelopment = true;
let settings = {};
try {
settings = JSON.parse(fs.readFileSync('./config.app.json', 'utf8'))[ENVIRONMENT];
} catch (error) {
console.log(error);
process.exit();
}
const babelConfig = {
test: /(\.js|.jsx)$/,
exclude: /(node_modules|build)/,
use: [{
loader: 'babel-loader',
options: {
plugins: ['syntax-jsx'],
presets: ['es2015', 'react']
}
}]
};
if (ENVIRONMENT === 'development') {
environmentConfig = require('./config/webpack.config.dev.js');
babelConfig.use[0].options.plugins.unshift('react-hot-loader/babel');
babelConfig.use.unshift({
loader: 'react-hot-loader/webpack'
});
extractLESS = new ExtractTextPlugin({
filename: 'styles.css',
allChunks: true,
disable: isDevelopment
});
} else {
environmentConfig = require('./config/webpack.config.prod.js');
extractLESS = new ExtractTextPlugin('styles.css');
isDevelopment = false;
}
const plugins = [
new webpack.LoaderOptionsPlugin({
options: {
eslint: {
configFile: path.join(__dirname, './config.eslint.json')
}
}
}),
extractLESS,
new webpack.DefinePlugin({
APP_SETTINGS: JSON.stringify(settings)
})
];
const entry = [
'babel-polyfill',
'whatwg-fetch',
'./app/index.jsx'
];
const config = Object.assign({
context: __dirname,
resolve: {
extensions: ['.js', '.jsx'],
modules: [path.resolve(__dirname, 'app'), 'node_modules']
},
module: {
rules: [babelConfig, {
exclude: /(node_modules|build)/,
loader: 'eslint-loader',
test: /(\.js|.jsx)$/
}, {
exclude: [/(node_modules|build)/, path.resolve(__dirname, 'app/styles/util.less')],
test: /(\.less)$/,
use: extractLESS.extract({
fallback: 'style-loader',
use: [{
loader: 'css-loader',
options: {
sourceMap: isDevelopment,
importLoaders: true,
modules: true,
localIdentName: isDevelopment ? '[name]_[local]_[hash:base64:3]' : '[hash:base64:4]',
minimize: !isDevelopment
}
}, {
loader: 'less-loader',
options: {
sourceMap: isDevelopment
}
}]
})
}, {
exclude: /(node_modules|build)/,
test: [path.resolve(__dirname, 'app/styles/util.less')],
use: extractLESS.extract({
fallback: 'style-loader',
use: [{
loader: 'css-loader'
}, {
loader: 'less-loader'
}]
})
}]
}
}, environmentConfig);
config.plugins = plugins.concat(config.plugins);
config.entry = config.entry.concat(entry);
module.exports = config;