Nuxt.js中scss公用文件(不使用官方插件style-resources)

项目多多少少应该都遇到有公用文件这种情况，比如说偶尔某一天产品来找你，能不能明天把网站的这个颜色给我改下？第二天再来给我换回来？

如果再css2.x时代，不使用css预处理技术，这一改只能“查找替换”了，使用预处理不使用变量也只有“查找替换”了。

当然，css3的时代就另当别论了，因为css3本身已经开始支持变量(参考文档MDN)！

话不多说，首先可以去看看nuxt官网的公用文件使用方式，链接！

毕竟还要装个第三方包文件style-resources，老实说每多装一个插件项目被黑的风险就大一分，毕竟有event-stream包被植入恶意代码的前车之鉴！！

下面说说如何不使用这个插件，直接使用node-sass的data属性实现公用文件。

先看看vue cli3官网给的sass公用文件实现方式，链接！此方法只适用于vue cli项目，不适用nuxt项目！！！

 // vue.config.js
 module.exports = {
   css: {
     loaderOptions: {
       // 给 sass-loader 传递选项
       sass: {
         // @/ 是 src/ 的别名
         // 所以这里假设你有 `src/variables.scss` 这个文件
         data: `@import "~@/variables.scss";`
       }
     }
   }
 }

nuxt毕竟不是使用的vue cli，所以这个方式只能给我们参考，nuxt具体实现如下:

 // nuxt.config.js
 export default {
   ...
   /*
   ** Build configuration
   */
   build: {
     ...
     // https://zh.nuxtjs.org/api/configuration-build/#loaders
     loaders: {
       scss: {
         // scss公用文件
         // 路径前面的assets是nuxt.js内置别名
         data: `
           @import "assets/sass/_fn.scss";
           @import "assets/sass/_mixins.scss";
           @import "assets/sass/_var.scss";
         `,
       },
     },
     ...
   },
   ...
 }

注意上面配置的loaders下的scss，不是vue cli3的sass！！以上是假设你的assets/sass目录中存在_var.scss，_mixins.scss，_fn.scss三个文件，当然你可以写N个都行。

其中路径前面的assets是nuxt内置别名，官网文档只说了~和@是内置的根目录，并没有介绍assets这个别名，其实内置目录有如此之多：

当然是用的nuxt版本不一样，可能内置别名也不一样，查看项目路径别名和新增项目路径别名方法如下：

// nuxt.config.js
export default {
  ...
  /*
  ** Build configuration
  */
  build: {
    ...
    // https://zh.nuxtjs.org/api/configuration-build/#loaders
    extend (config, ctx) {
      if (ctx.isDev) {
        // 查看别名配置信息
        console.log(config.resolve.alias);
        // 添加 alias 配置
        // !这儿添加的别名不能在nuxt.config.js文件中使用
        Object.assign(config.resolve.alias, {
          'sass': path.resolve(__dirname, 'assets/sass'),
        });
      }
    },
    ...
  },
  ...
}

本文章中使用的nuxtjs版本为"nuxt": "^2.8.1"。

以上就是nuxt配置公用scss文件的使用方式了，本人习惯使用scss，所以没去捣鼓sass文件公用方式，方法跟上面差不多，具体查看node-sass配置！

内容完！