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项目！！！

 1 // vue.config.js
 2 module.exports = {
 3   css: {
 4     loaderOptions: {
 5       // 给 sass-loader 传递选项
 6       sass: {
 7         // @/ 是 src/ 的别名
 8         // 所以这里假设你有 `src/variables.scss` 这个文件
 9         data: `@import "~@/variables.scss";`
10       }
11     }
12   }
13 }

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

扫描二维码关注公众号，回复： 6630088 查看本文章

 1 // nuxt.config.js
 2 export default {
 3   ...
 4   /*
 5   ** Build configuration
 6   */
 7   build: {
 8     ...
 9     // https://zh.nuxtjs.org/api/configuration-build/#loaders
10     loaders: {
11       scss: {
12         // scss公用文件
13         // 路径前面的assets是nuxt.js内置别名
14         data: `
15           @import "assets/sass/_fn.scss";
16           @import "assets/sass/_mixins.scss";
17           @import "assets/sass/_var.scss";
18         `,
19       },
20     },
21     ...
22   },
23   ...
24 }

注意上面配置的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.isClient) {
        // 查看别名配置信息
        console.log(config.resolve.alias);
        // 添加 alias 配置
        // !这儿添加的别名不能在nuxt.config.js文件中使用
        Object.assign(config.resolve.alias, {
          'sass': path.resolve(__dirname, 'assets/sass'),
        });
      }
    },
    ...
  },
  ...
}

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

内容完！

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

猜你喜欢