先解决当前配置的错误 #

你的报错根源是**prependData选项放错位置了**——它是sass-loader自身的配置项，不该嵌套在sassOptions里面。Sass编译器不识别这个选项，才会抛出奇怪的解析错误。

修正后的webpack配置应该是这样：

{
  test: /\.scss$/i,
  use: [
    'style-loader',
    'css-loader',
    {
      loader: 'sass-loader',
      options: {
        // prependData 移到这里，和sassOptions同级
        prependData: `@import "${path.resolve(__dirname, 'path-to-global-style.scss')}";`,
        sassOptions: {
          includePaths: [path.resolve(__dirname, 'path-to-global-style-dir')],
        },
      },
    },
  ],
}

另外可以优化一下：如果你的全局样式文件在includePaths指定的目录里，直接写文件名就能导入，不用写完整路径，更简洁：

prependData: `@import "global-style.scss";`,

另一种更便捷的方案：使用sass-resources-loader #

如果你的全局样式包含变量、混合宏这类需要在所有SCSS文件中直接使用的内容，sass-resources-loader会更省心——它能自动把指定文件注入到每个SCSS模块，不用手动写@import。

步骤如下：

1. 安装依赖：

npm install sass-resources-loader --save-dev

2. 修改webpack配置：

{
  test: /\.scss$/i,
  use: [
    'style-loader',
    'css-loader',
    'sass-loader',
    {
      loader: 'sass-resources-loader',
      options: {
        // 可以指定多个全局样式文件
        resources: [
          path.resolve(__dirname, 'path-to-global-style.scss'),
          // 比如全局变量文件
          path.resolve(__dirname, 'path-to-global-vars.scss')
        ]
      }
    }
  ]
}

这个loader会确保你的全局样式在每个SCSS文件编译前都被导入，而且不会重复编译相同的内容，性能也不错。

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