Webpack, sass-loader w/ node-sass fails to parse module @import ("Unexpected character '@'")

Question

Overview: I'm trying to compile SCSS using Webpack with "node-sass", "sass-loader", "css-loader", & "style-loader" and no particular JS framework, aside from Typescript as the JS transpiler.

I've tried everything I can think of or could find on the internet, including installing older versions of these dependencies that I know are working in other projects. At this point, I'm at my wits end. Can anyone spot what I'm doing wrong?

Please let me know if I need to add any more details.

Observed error:

ERROR in ./src/styles/base.scss 1:0

Module parse failed: Unexpected character '@' (1:0)

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 @import 'reset';

|

| /*

@ ./src/layouts/page.ts 21:0-30

@ ./app.ts

ℹ ｢wdm｣: Failed to compile.

package.json details:

• Main file: "main": "app.ts"
• Package versions:
  • "devDependencies": { "@types/webpack": "^4.41.10", "@types/webpack-dev-server": "^3.10.1", "css-loader": "^3.4.2", "node-sass": "^4.13.1", "sass-loader": "^8.0.2", "style-loader": "^1.1.3", "svg-inline-loader": "^0.8.2", "ts-loader": "^6.2.2", "typescript": "^3.8.3", "webpack": "^4.42.1", "webpack-cli": "^3.3.11", "webpack-dev-server": "^3.10.3" }
• Running start script:
  • "start": "webpack-dev-server --open"

Webpack config:

const path = require('path');
const CWD = process.cwd();
const sass = require('node-sass');
module.exports = {
    devtool: 'eval-source-map',
    devServer: {
        port: 4001
    },
    entry: {
        app: './app.ts'
    },
    output: {
        chunkFilename: '[id].js',
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].bundle.js',
    },
    mode: 'development',
    module: {
        rules: [{
            exclude: /node_modules/,
            test: /\.ts$/,
            loader: 'ts-loader'
        },
        {
            test: '/\.(css|scss)$/',
            use: [
                // Creates `style` nodes from JS strings
                'style-loader',
                {
                    // Translates CSS into CommonJS
                    loader: 'css-loader',
                    options: {
                        modules: true
                    }
                },
                {
                    // Compiles Sass to CSS
                    loader: 'sass-loader',
                    options: {
                        sassOptions: {
                            includePaths: [path.resolve(CWD, 'src/styles')]
                        }
                    }
                }
            ]
        }]
    },
    // Fixes npm packages that depend on `fs` module
    node: {
        fs: 'empty'
    },
    resolve: {
        extensions: ['.css', '.js', '.scss', '.ts'],
        modules: [
            'node_modules',
            path.resolve(__dirname)
        ]
    },
    target: 'web'
};

Answer 1

looks like you accidentally quoted your regex:

- test: '/\.(css|scss)$/',
+ test: /\.(css|scss)$/,