Ошибка Webpack + SCSS: «Ошибка синтаксического анализа модуля: неожиданный символ« @ »(1: 0)»

Question

Я пытаюсь настроить цвета по умолчанию для начальной загрузки с помощью 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 SNIPPET

{
  "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 SNIPPET

    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

Кто-нибудь может увидеть, что мне не хватает? Это были несколько разочаровывающих часов ...

Answer 1

ваш package.json выглядит хорошо. вам нужно sass-loader node-sass. Это может зависеть от вашей версии vue, но в официальной документации говорится о следующем правиле веб-пакета.

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

Я предполагаю, что загрузчик стилей позволяет импортировать scss, но без использования синтаксиса шаблона.

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

Более того, я бы ожидал, что sass будет одним из devDependencies.

npm i sass --save-dev