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` 这个文件，最新的 sass-loader 参数 data 改为了 prependData
        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内置别名，最新的 sass-loader 参数 data 改为了 prependData
        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配置！

内容完！