Webpack4构建Vue应用时sass-loader报SassError: Expected newline求助

• 你的sass-loader配置重复注册：scss/sass解析链中连续声明了两次sass-loader，同一份样式文件会被重复编译两次，第二次编译时已经是CSS格式的内容被当作Sass语法解析直接报错。
• 未区分.scss和.sass两种语法规则：.scss使用带分号、大括号的类CSS语法，.sass使用缩进式无分号语法，你用同一套规则匹配两种后缀，必然会出现语法兼容问题。
• vue-loader版本不兼容：你使用Vue2.x，但安装了仅支持Vue3的vue-loader@16，同时存在Vue3专用的@vue/compiler-sfc依赖，也会导致样式解析异常。
• 自定义webpack配置未生效：你使用vue-cli-service启动项目，默认不会读取根目录的webpack.config.js，自定义配置需要写在vue.config.js中。

1. 先修正依赖版本：
   卸载不兼容的依赖，执行命令：

npm uninstall vue-loader @vue/compiler-sfc
npm install vue-loader@15.9.8 -D

2. 拆分scss和sass的解析规则，删除重复的sass-loader声明，将以下内容替换你原有配置中css、scss相关的module.rules部分：

// 处理css
{
  test: /\.(css)$/,
  use: [
    "vue-style-loader",
    "style-loader",
    "css-loader",
    {
      loader: "postcss-loader",
      options: {
        postcssOptions: {
          plugins: () => [autoprefixer()],
        },
      },
    },
  ],
},
// 处理.scss后缀文件
{
  test: /\.scss$/,
  use: [
    "vue-style-loader",
    "style-loader",
    "css-loader",
    {
      loader: "postcss-loader",
      options: {
        sourceMap: true,
        importLoaders: 2,
        postcssOptions: {
          plugins: () => [autoprefixer()],
        },
      },
    },
    {
      loader: "sass-loader",
      options: {
        sourceMap: true,
        implementation: require("sass"),
        sassOptions: {
          indentedSyntax: false,
          prependData: `@import "app/javascript/manager/styles/main.scss"`,
        }
      }
    },
  ],
},
// 处理.sass后缀文件（适配vuetify自带的缩进式sass）
{
  test: /\.sass$/,
  use: [
    "vue-style-loader",
    "style-loader",
    "css-loader",
    {
      loader: "postcss-loader",
      options: {
        sourceMap: true,
        importLoaders: 2,
        postcssOptions: {
          plugins: () => [autoprefixer()],
        },
      },
    },
    {
      loader: "sass-loader",
      options: {
        sourceMap: true,
        implementation: require("sass"),
        sassOptions: {
          indentedSyntax: true,
        }
      }
    },
  ],
}

3. 如果是使用vue-cli的项目，将上述配置放到根目录的vue.config.js的configureWebpack字段下，不要单独写webpack.config.js，否则配置不会被加载。
4. 清理node_modules和lock文件后重新安装依赖，启动项目即可。

内容的提问来源于stack exchange，提问作者Alex