I am using Webpack 3 and CSS Modules. I have a different loaders for ".local.css" and "local.scss" files (local files) and another set of loaders for my global ".css or .less" files.
Now I have one more files type, a gloabl ".scss" file. I dont' want to make another set of loaders just for .scss file since the loaders are the same as the ones used for global ".css and .less" files.
There is just one difference, if file is ".less" I will use less loader
and if its ".scss" then I will use sass loader
.
{
test: /\.local\.(css|scss)$/,
use: ExtractLocal.extract({
fallback: 'style-loader?sourceMap',
use: [
{
loader: 'css-loader',
options: {
sourceMap: true,
minimize: true,
modules: true,
importLoaders: 1,
localIdentName: '[local]___[name]__[hash:base64:5]',
},
},
{
loader: 'postcss-loader',
options: {
sourceMap: true,
},
},
{
loader: 'sass-loader',
options: {
sourceMap: true,
},
},
{
loader: 'sass-resources-loader',
options: {
resources: [ path.resolve(__dirname, './src/client/styling/styles/variables.scss'), ],
},
},
],
}),
},
{
test: /^((?!\.local).)+\.(css|less)$/,
use: ExtractGlobal.extract({
fallback: 'style-loader?sourceMap',
use: [
{
loader: 'css-loader',
options: {
sourceMap: true,
minimize: true,
},
},
{
loader: 'postcss-loader',
options: {
sourceMap: true,
},
},
{
loader: 'less-loader',
options: {
sourceMap: true,
},
},
],
}),
},
How do I do this? Can I somehow check a file type and use a appropriate loader, for example?
{
test: /^((?!\.local).)+\.(css|less|scss)$/,
use: ExtractGlobal.extract({
fallback: 'style-loader?sourceMap',
use: [
{
loader: 'css-loader',
options: {
sourceMap: true,
minimize: true,
},
},
{
loader: 'postcss-loader',
options: {
sourceMap: true,
},
},
if(test === '.less') {
loader: 'less-loader',
options: {
sourceMap: true,
},
} else {
loader: 'sass-loader',
options: {
sourceMap: true,
},
}
],
}),
},
I know my example doesn't make sense, just wanted to demonstrate what I am aiming at.