Loaders for both Semantic UI React and CSS Files - reactjs

Question

I stumbled upons some errors when i tried to use loaders for semantic-ui-css/semantic.min.css and normal css files at the same time. I was able to load in respectively the semantic.min.css and the normal css files when i did it indepentently, but not at the same time.
Loader for Semantic UI (It works)
var webpack = require('webpack');
var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var BUILD_DIR = path.resolve(__dirname, 'src/client/public');
var APP_DIR = path.resolve(__dirname, 'src/client/app');
var config = {
entry: APP_DIR + '/index.jsx',
output: {
path: BUILD_DIR,
filename: 'bundle.js'
},
module : {
loaders : [
{
test : /\.jsx?/,
include : APP_DIR,
loader : 'babel-loader'
},
{
test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
use: {
loader: 'url-loader',
options: {
limit: 100000,
},
},
},
{
test: /\.css$/,
include: /node_modules/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: [
{
loader: 'css-loader',
}
],
})
},
]
},
plugins: [
new ExtractTextPlugin("styles.css"),
]
};
module.exports = config;
Loader for the normal CSS files (It works)
var webpack = require('webpack');
var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var BUILD_DIR = path.resolve(__dirname, 'src/client/public');
var APP_DIR = path.resolve(__dirname, 'src/client/app');
var config = {
entry: APP_DIR + '/index.jsx',
output: {
path: BUILD_DIR,
filename: 'bundle.js'
},
module : {
loaders : [
{
test : /\.jsx?/,
include : APP_DIR,
loader : 'babel-loader'
},
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
]
},
plugins: [
new ExtractTextPlugin("styles.css"),
]
};
module.exports = config;
Loaders for both at the same time (Does not work)
var webpack = require('webpack');
var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var BUILD_DIR = path.resolve(__dirname, 'src/client/public');
var APP_DIR = path.resolve(__dirname, 'src/client/app');
var config = {
entry: APP_DIR + '/index.jsx',
output: {
path: BUILD_DIR,
filename: 'bundle.js'
},
module : {
loaders : [
{
test : /\.jsx?/,
include : APP_DIR,
loader : 'babel-loader'
},
{
test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
use: {
loader: 'url-loader',
options: {
limit: 100000,
},
},
},
{
test: /\.css$/,
include: /node_modules/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: [
{
loader: 'css-loader',
}
],
})
},
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
]
},
plugins: [
new ExtractTextPlugin("styles.css"),
]
};
module.exports = config;

Answer 1

This is because you are defining two tests for .css in your loaders. The first test is evaluating is true for all .css files that are included in the project so all CSS is resolving with your first loader rule. If you want to use two rules for .css files then you need to get more specific with your test. I'd put the node_modules rule second. And for the first rule, you can use exclude to make sure the loader skips anything in node_modules which will then go to your next loader.