scss-loader error問題解決 : options has an unknown property 'includePaths'

使用webpack工程化小程序時，scss 解析失敗

以下是我原本的配置：

// webpack.config.js

module.exports = {
	...其他配置
  module: {
    rules: [
    	...
      {
        test: /\.(scss)$/,
        include: /src/,
        use: [
          {
            loader: 'file-loader',
            options: {
              useRelativePath: true,
              name: '[path][name].wxss',
              context: resolve('src'),
            },
          },
          {
            loader: 'sass-loader',
            options: {
              includePaths: [resolve('src', 'styles'), resolve('src')],
            },
          },
        ],
      },
     ]
   },
  plugins: [
  	...
    new CopyWebpackPlugin([
      {
        from: '**/*',
        to: './',
        ignore: ['**/*.js', '**/*.scss'],
      },
    ]),
    // 用來處理入口文件 entry.js 使我們不用手動的添加頁面到webpack
    new MinaWebpackPlugin({
      scriptExtensions: ['.js'],
      assetExtensions: ['.scss'],
    }),
  ],
}

npm run start 之後，控制檯報錯：

ERROR in ./pages/index/index.scss
Module build failed (from …/node_modules/sass-loader/dist/cjs.js):
ValidationError: Invalid options object. Sass Loader has been initialised using an options object that does not match the API schema.
-options has an unknown propertyincludePaths’. These properties are valid:
object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }
at validate (/Users/houxinchao/hxc-project/WeChatProjects/miniprogram-1/node_modules/sass-loader/node_modules/schema-utils/dist/validate.js:49:11)
at Object.loader (/Users/houxinchao/hxc-project/WeChatProjects/miniprogram-1/node_modules/sass-loader/dist/index.js:36:28)
@ multi ./pages/index/index.scss assets_chunk_name[0]

從上文可以知道：選項具有未知屬性includePaths，該屬性與當前官方API不符。
scss官方git近期（2019年9月中旬）更新了配置：

// 官方最新 webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
            // 可以看到在原來的基礎上增加了sassOptions屬性，並且把includePaths放在了該屬性內
              sassOptions: {
                indentWidth: 4,
                includePaths: ['absolute/path/a', 'absolute/path/b'],
              },
            },
          },
        ],
      },
    ],
  },
};

由官方文檔修改後：

// 官方最新 webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(scss)$/,
        include: /src/,
        use: [
 			...
          {
            loader: 'sass-loader',
            // 修改後
            options: {
              sassOptions: {
                indentWidth: 4,
                includePaths: [resolve('src', 'styles'), resolve('src')],
              },
            },
          },
        ],
      },
    ],
  },
};