react项目中在webpack配置sass

今天在webpack.config.js中配置sass时遇到一个问题

Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
 - configuration.module.rules[1] should be one of these:
   ["..." | object {
    
     assert?, compiler?, dependency?, descriptionData?, enforce?, exclude?, generator?,   -> A rule.                                                                                            Details:                                                                   -> A rule description with conditions and effects    -> A rule description with conditions and effects for modules.

先看出现错误时的配置步骤

• 安装sass：通过命令行安装sass-loader和node-sass

npm install sass-loader node-sass -D

• 配置webapck.config.js，匹配scss文件结尾，使用sass解析成css

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

此时出现了上诉问题
通过查找webpack文档发现，文档中使用的语法与上述配置不一致，可能是版本问题导致了上诉问题

解决方式

修改第二步的配置

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

---

---

问题2：在使用sass-resources-loader进行配置全局变量时，使用concat配置时，报错变量未定义（说明配置不成功）

{
    
    
  test: sassRegex,
  exclude: sassModuleRegex,
  use: getStyleLoaders(
    {
    
    
      importLoaders: 3,
      sourceMap: isEnvProduction
        ? shouldUseSourceMap
        : isEnvDevelopment,
      modules: {
    
    
        mode: 'icss',
      },
    },
    'sass-loader'
  ).concat({
    
    
    loader: 'sass-resources-loader',
    options: {
    
    
      resources: [
        path.resolve(__dirname, './../src/styles/main.scss'),
      ],
    },
  }),
  sideEffects: true,
},

解决方式：不在此处concat连接配置，而是在匹配.scss文件时配置，具体配置如下

{
    
    
 test: /\.scss/, //配置sass转css
 use: [
   {
    
     loader: 'style-loader' },
   {
    
     loader: 'css-loader' },
   {
    
     loader: 'sass-loader' },
   {
    
    
     loader: 'sass-resources-loader',
     options: {
    
    
       sourceMap: true,
       resources: [
         path.resolve(__dirname, './../src/styles/main.scss'),
       ],
     },
   },
 ],
},