I'm currently facing issues with Webpack (version 3.6.0) while trying to combine multiple SCSS files into a single external CSS file due to problems with parsing the @import statements.
The entry index.js file includes:
import './styles/main.scss';
Here is an example of the entry SCSS file:
@import 'reset.scss';
@import 'global.scss';
@import 'fonts.scss';
@import 'system.scss';
This is the current webpack configuration being used:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
entry: {
app: './src/index.js'
},
context: path.resolve(__dirname),
output: {
path: path.resolve(__dirname, 'public'),
filename: 'bundle.js',
},
plugins: [
new CleanWebpackPlugin(['app']),
new HtmlWebpackPlugin({
title: 'Minimum-Viable',
filename: 'index.html',
template: './public/index.html',
}),
],
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: [
'es2015',
'react',
],
plugins: ['transform-class-properties'],
},
},
},
{
test: /\.scss$/,
include: [
path.resolve(__dirname, 'styles')
],
use: [
{loader:'style-loader'},
{loader:'css-loader'},
{loader:'sass-loader'}
]
},
],
},
resolve: {
extensions: ['.js','.scss']
}
};
An error is being thrown stating:
ERROR in ./src/styles/main.scss Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type. | @import 'reset.scss';
If anyone has any helpful tips or pointers on how to resolve this issue, it would be much appreciated.