webpack加载style-resources-loader使用方法

webpack加载style-resources-loader使用方法如下：

1. 首先，确保已经在项目中安装了webpack和style-resources-loader。

   npm install webpack style-resources-loader --save-dev

2. 在webpack配置文件中，添加style-resources-loader的配置。

   const path = require('path');

   module.exports = {
     // 其他配置...
     module: {
       rules: [
         // 其他规则...
         {
           test: /\.scss$/,
           use: [
             // 其他loader...
             'style-loader',
             'css-loader',
             'sass-loader',
             {
               loader: 'style-resources-loader',
               options: {
                 patterns: [
                   path.resolve(__dirname, '路径/到/样式资源文件1.scss'),
                   path.resolve(__dirname, '路径/到/样式资源文件2.scss'),
                 ],
               },
             },
           ],
         },
       ],
     },
   };

3. 在配置中，使用style-resources-loader的loader，将样式资源文件引入到每个需要的样式文件中。

在上面的配置中，可以看到`patterns`选项里指定了两个样式资源文件的路径，你可以根据自己的需求进行扩展或更改。注意，路径需要使用`path.resolve`方法来获取绝对路径。

例如，如果你的项目中有`styles`文件夹，并且在该文件夹下有`variables.scss`和`mixins.scss`两个样式资源文件，你可以将路径配置为：

   patterns: [
     path.resolve(__dirname, 'styles/variables.scss'),
     path.resolve(__dirname, 'styles/mixins.scss'),
   ],

这样，在每个`.scss`文件中，你就可以直接使用这些样式资源，而无需每次都手动引入。

总结一下，通过在webpack配置文件中的module.rules中添加style-resources-loader的配置项，来一次性加载全局样式资源文件，从而简化样式文件的引入。