Reputation: 523
Seem to be having a problem with Webpack not being able to compile my SCSS files. I have a file a package.json
file and webpack.config.js
file generated from using webpack-cli init
package.
Below is the webpack error I am getting when trying to compile when importing my .scss
file into my .js
:
ERROR in ./src/scss/styles.scss 2:5
Module parse failed: Unexpected token (2:5)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| $green: green;
> body {
| background-color: $green;
| }
@ ./src/js/index.js 2:0-29
Below is my webpack.config.js
file that was generated using the webpack-cli init
command. I had to add the scss loader stuff to the module.rule
but I'm sure it's done correctly.
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
entry: './src/js/index.js',
output: {
filename: '[name].[chunkhash].js',
path: path.resolve(__dirname, 'html')
},
plugins: [new webpack.ProgressPlugin(), new HtmlWebpackPlugin()],
module: {
rules: [
{
test: /.(js|jsx)$/,
include: [path.resolve(__dirname, 'src/js')],
loader: 'babel-loader',
options: {
plugins: ['syntax-dynamic-import'],
presets: [
[
'@babel/preset-env',
{
modules: false
}
]
]
}
},
{
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader']
}
}
]
},
devServer: {
open: true
}
};
Below is the package.json
file that was generate from the webpack-cli init
command
{
"name": "test-webpack",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"devDependencies": {
"@babel/core": "^7.7.2",
"@babel/preset-env": "^7.7.1",
"@webpack-cli/init": "^0.2.2",
"babel-loader": "^8.0.6",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"css-loader": "^3.2.0",
"html-webpack-plugin": "^3.2.0",
"node-sass": "^4.13.0",
"sass-loader": "^8.0.0",
"style-loader": "^1.0.0",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.9.0"
},
"description": "My webpack project",
"scripts": {
"build": "webpack",
"start": "webpack-dev-server"
}
}
I'm sure I have everything that I need installed to make this work but no matter what I try it doesn't want to compile my .scss
files :(
Upvotes: 0
Views: 1110
Reputation: 994
I think you might want to remove one of the curly braces on the test for scss. Although you described how the scss filess should be handled. The description is not directly under the rules array like you handled the .jsx/.js files. I hope this helps
Upvotes: 2