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"
  }

- uioporqwerty

---

你在 package.json 中安装了 node-sass 吗？ - zenoh

是的，我有 "node-sass": "^4.9.2",。 - uioporqwerty

我之所以遇到这个错误，是因为我只使用了 Sass。通过在配置中添加一个纯 CSS 规则来解决它：{ test: /\.css$/, use: ['style-loader', 'css-loader'] }。 - twigmac

Answer 1

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

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

- zenoh

---

啊，我明白了。是因为我排除了 node_modules，所以它无法解析它。真蠢。扇自己一巴掌 - uioporqwerty

同样的问题，只是我不得不删除 include: path.resolve(__dirname, "src"),。 - InsOp