Reputation: 135
I have the following configuration in my webpack.config.dev.js
file
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const path = require('path');
const webpackMerge = require('webpack-merge');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const baseConfig = require('./webpack.config.js');
module.exports = webpackMerge(baseConfig, {
mode: 'development',
devtool: 'inline-source-map',
module: {
rules: [{
// SVG Less style loader
test: /svg\.less$/,
use: [
'to-string-loader',
{
loader: 'css-loader',
options: {
sourceMap: true
}
},
'postcss-loader', {
loader: 'less-loader',
options: {
sourceMap: true
}
}
]
}, {
// Less style loader
test: /.*(?<!svg)\.less$/,
use: [MiniCssExtractPlugin.loader, {
loader: 'css-loader',
options: {
sourceMap: true
}
}, {
loader: 'less-loader',
options: {
sourceMap: true
}
}]
}]
},
devServer: {
compress: true,
host: '127.0.0.1',
port: 8080,
watchOptions: {
aggregateTimeout: 300,
poll: 1000
},
stats: {
color: true
}
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].css'
}),
new ForkTsCheckerWebpackPlugin({
tsconfig: path.join(__dirname, './tsconfig.json')
})
]
});
Also the webpack
versions are given below
"webpack": "4.6.0",
"webpack-bundle-analyzer": "^2.13.1",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.7",
"webpack-merge": "^4.1.4"
When I do yarn install
I'm getting error. But the modules are getting installed and yarn serve
is working without any problem
ERROR in ./styles/main.less
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.
Much appreciated if anybody can help on this. Thanks in advance
Upvotes: 1
Views: 270