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快照

    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版本，但官方文档指出要使用以下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

Webpack + SCSS错误：“模块解析失败：意外字符'@'（1：0）”

1 个答案: