开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第30天，点击查看活动详情

前言

如果我们项目中是使用sass写的样式，并且定义了一些mixins、varialbles等样式，当我们想在某个页面文件使用时，需要手动用@import导入，当用的文件多了就显得很不方便了。那么万能的npm包有相关插件能帮我们全局配置好，下面我们就能看一下该插件。

style-resources-loader

style-resources-loader:样式资源加载器，它能够让css文件之间进行共享，在使用时候不需要手动导入文件。项目中使用该插件直接下载依赖包：

   npm install style-resources-loader

下载完我们还得再下载一些插件配合使用：

vue-cli-plugin-style-resources-loader
sass-loader/less-loader
node-sass/less
sass跟less都能使用该插件，根据实际情况下载对应依赖就行。后续我们就以sass为例进行讲解。该插件使用时需要进行配置，这里我们以vue-cli创建项目为例，在vue.config.js中加上以下代码：

    pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'scss',//预处理语言
      patterns: [
       //文件路径 在书写时不能用@别名
        path.resolve(__dirname, 'src/styles/_mixins.scss')
      ]
    }
  },

配置好重启项目，然后我们就能直接使用@include引入@mixin，下面我们看一下实际项目中的作用：

首先在mixin.scss中写一个@mixin
然后在.vue的style中使用

如果我们没有配置style-resources-loader这时候终端就会报错，打开页面也会看到错误提示。

要想编译成功解决报错我们可以手动引入对应的mixin.scss文件

   @import '~@/styles/mixin.scss';

再次运行没有错误，页面正常运行，这就是我们上面提到的必须手动导入。而当我们把插件配置好以后，我们直接@include就能编译成功，不用@import，直接省略了最后一步。除了mixin，variables、functions也都可以配置好直接使用。

总结

以上就是style-resources-loader插件的作用与配置方法，不要忘记同时下载与其相关的插件，还要根据预处理语言下载对的插件。

需求小能手——样式资源加载器

前言

style-resources-loader

总结