CODEWITHSUNDEEP
webpackwebpack-dev-serverwebpack-4
Stephen
Stephen

Reputation: 523

Webpack can't handle my SCSS files even though I have the correct loaders

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

Answers (1)

Tolumide
Tolumide

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

Related Questions