Webpack +SCSS 错误：“模块解析失败：意外字符 '@' (1:0)”答案

【问题标题】：Webpack +SCSS error: "Module parse failed: Unexpected character '@' (1:0)"Webpack +SCSS 错误：“模块解析失败：意外字符 '@' (1:0)”
【发布时间】：2019-08-04 08:43:37
【问题描述】：

我正在尝试使用 SCSS 自定义引导程序默认颜色。当我尝试运行该项目时，出现以下错误：

    ERROR in ./ClientApp/style.scss 1:0
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.
> @import "custom";
| @import "~bootstrap/scss/bootstrap";
|

package.json 片段

{
  "devDependencies": {
    "css-loader": "^2.1.0",
    "mini-css-extract-plugin": "^0.5.0",
    "node-sass": "^4.8.2",
    "optimize-css-assets-webpack-plugin": "^5.0.1",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
  }
}

webpack.config.js 片段

    module: {
      rules: [
        { test: /\.vue$/, include: /ClientApp/, use: 'vue-loader' },
        { test: /\.js$/, include: /ClientApp/, use: 'babel-loader' },
        { test: /\.css$/, use: isDevBuild ? ['style-loader', 'css-loader'] : [MiniCssExtractPlugin.loader, 'css-loader'] },
        { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' },
---------- I ADDED THIS SNIPPET FROM AN EXAMPLE I FOUND --------------
            {
              test: /\.scss$/,
              include:
              use: [
                {
                  loader: "style-loader" // creates style nodes from JS strings
                },
                {
                  loader: "css-loader" // translates CSS into CommonJS
                },
                {
                  loader: "sass-loader" // compiles Sass to CSS
                }
              ]
            }
-------------- SNIPPET END -------------------------------
          ]
        },

该项目是一个示例项目：https://github.com/TrilonIO/aspnetcore-Vue-starter

谁能看到我错过了什么？这已经是令人沮丧的几个小时了......

【问题讨论】：

你使用的是什么版本的 webpack？如果你是

标签： vue.js webpack sass

【解决方案1】：

您的package.json 看起来不错。你需要sass-loadernode-sass。这可能取决于您的 vue 版本，但官方文档声明使用以下 webpack 规则。

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

我的猜测是样式加载器可以导入 scss，但不使用模板语法。

<style lang="scss" src="./styles.scss">

此外，我希望 sass 也是 devDependencies 之一。

npm i sass --save-dev

【讨论】：