webpack fails to build when trying to add .scss files

Question

EDITED: i fixed the regex for scss files (this was actually a typo as i was posting this to stack overflow, but the whole time i've been having this problem, the regex was typed out correctly.) but it hasn't fixed the problem. i still get an incomplete build and error messages telling me i don't have a loader installed for the .scss files i'm trying to bundle, even though i have node-sass sass-loader css-loader and style-loader all installed, css files imported, and config rules written out correctly.

I'll include copies of my package.json, webpack.config.js and index.js but to the best of my understanding of the course material i'm working on now, i'm correctly installing all the dependancies, adding the right rules to the config file, and importing the scss files in my index.js correctly as well. however, every time i try to build, it fails and tells me i don't have a correct loader for my .scss files.

any help is greatly appreciated. this is my first time trying to set up webpack with sass.

package.json:

{
  "name": "example-project",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node src/server/index.js",
    "build-prod": "webpack --config webpack.prod.js",
    "build-dev": "webpack-dev-server --config webpack.dev.js --open"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "dependencies": {
    "express": "^4.17.1",
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10"
  },
  "devDependencies": {
    "@babel/core": "^7.8.3",
    "@babel/preset-env": "^7.8.3",
    "babel-loader": "^8.0.6",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^3.4.2",
    "html-webpack-plugin": "^3.2.0",
    "node-sass": "^4.13.0",
    "sass-loader": "^8.0.2",
    "style-loader": "^1.1.2",
    "webpack-dev-server": "^3.10.1"
  }
}

webpack config file:

const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
  mode: "production",
  entry: "./src/client/index.js",
  module: {
    rules: [
      {
        test: '/.js$/',
        exclude: /node_modules/,
        loader: "babel-loader"
      },
      {
        test: '/\.scss$/',
        use: ['style-loader', 'css-loader', 'sass-loader']
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/client/views/index.html",
      filename: "./index.html"
    }),
    new CleanWebpackPlugin({
      // Simulate the removal of files
      dry: true,
      // Write Logs to Console
      verbose: true,
      // Automatically remove all unused webpack assets on rebuild
      cleanStaleWebpackAssets: true,
      protectWebpackAssets: false
    })
  ]
};

index.js

import { handleSubmit } from "./js/formHandler";
import { nameChecker } from "./js/nameChecker";


import "./styles/resets.scss";
import  "./styles/base.scss";
import  "./styles/footer.scss";
import  "./styles/form.scss";
import "./styles/header.scss";

alert("this happened");

Answer 1

I had this problem too. I took out the '' marks around the test: '/.scss$/', line and the problem went away. I think babel is correcting the quote marks.

I have to say I'm very confused about the quote marks. ' or " or ` They all seems to have slightly different uses, but I can't really explain it yet.

Answer 2

copy pasting these lines into my rules solved my problems.

      {
        test: /\.s[ac]ss$/i,
        use: [
          // Creates `style` nodes from JS strings
          'style-loader',
          // Translates CSS into CommonJS
          'css-loader',
          // Compiles Sass to CSS
          'sass-loader',
        ],
      },

Answer 3

In your webpack file, you are checking for only css files. You need to add rule for .scss files also

Change following line

  {
    test: '/\.css$/', // You are checking for css files
    use: ['style-loader', 'css-loader', 'sass-loader']
  }

to

{
    test: '/\.scss$/',  // Add .scss instead
    use: ['style-loader', 'css-loader', 'sass-loader']
 }

Or You can add both rules for checking for css files and scss files

{
    test: '/\.css$/', 
    use: ['style-loader', 'css-loader']
},
{
    test: '/\.scss$/',
    use: ['style-loader', 'css-loader', 'sass-loader']
}