WebPack 4 意外字符 '@'

Question

我知道这个问题已经有很多实例了，但是没有一个解决了我在将 Webpack 与 Sass 一起使用时遇到的问题。

上下文:我正在使用 npm 安装 material-design-lite 并在我的 AddReminderView.ts 中需要它文件如下:

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

这是我的 webpack 配置，非常简单。

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')
    }
  };

我收到的错误是这样的:

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

如何修复我的 Webpack 配置，以便正确包含 .css 文件？

编辑:

这是我的 npm 依赖项:

"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

尝试将 CSS webpack 模块测试更新为此？

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