WebPack 4 Unexpected character '@'

Question

I know there are a lot of instances of this question already but none of them have resolved the issue I'm having when using Webpack with Sass.

Context: I'm installing material-design-lite using npm and requiring it in my AddReminderView.ts file as such:

require('material-design-lite/dist/material.css');
require('material-design-lite/dist/material.js');
require('../scss/styles.scss');

This is my webpack configuration, pretty simple.

const path = require('path');

module.exports = {
    mode: 'development',
    entry: {
       add_trial: ['./src/views/AddReminderView.ts',
                  ]
    },
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          loader: 'ts-loader',
          exclude: /node_modules/
        },
        {
          test: /\.scss$/,
          loader: ['style-loader', 'css-loader', 'sass-loader'],
          exclude: /node_modules/
        }
      ]
    },
    resolve: {
      extensions: [ '.tsx', '.ts', '.js' ]
    },
    output: {
      filename: '[name].js',
      path: path.resolve(__dirname, 'dist/js')
    }
  };

The error I receive is as such:

ERROR in ./node_modules/material-design-lite/dist/material.css 8:0
Module parse failed: Unexpected character '@' (8:0)
You may need an appropriate loader to handle this file type.
|  * @link https://github.com/google/material-design-lite
|  */
> @charset "UTF-8";
| /**
|  * Copyright 2015 Google Inc. All Rights Reserved.
 @ ./src/views/AddReminderView.ts 3:0-49
 @ multi ./src/views/AddReminderView.ts

How can I fix my Webpack configuration so that I can include .css files correctly?

Edit:

Here are my npm dependencies:

"devDependencies": {
    "@types/node": "^10.5.2",
    "css-loader": "^1.0.0",
    "extract-text-webpack-plugin": "^3.0.2",
    "node-sass": "^4.9.2",
    "sass": "^1.9.1",
    "sass-loader": "^7.0.3",
    "strip-loader": "^0.1.2",
    "style-loader": "^0.21.0",
    "ts-loader": "^4.4.2",
    "typescript": "^2.9.2",
    "typings-for-css-modules-loader": "^1.7.0",
    "webpack": "^4.16.0",
    "webpack-cli": "^3.0.8",
    "webpack-dev-server": "^3.1.4"
  },
"dependencies": {
    "guid-typescript": "^1.0.7",
    "material-design-lite": "^1.3.0"
  }

Answer 1

Try update the CSS webpack module test to this?

  module: {
    rules: [
      {
        test: /\.(sa|sc|c)ss$/,
        use: ["style-loader", "css-loader", "sass-loader"]
      }
    ]
  }