【建议收藏】如何在nuxt中使用scss？

这是一篇小小的踩坑记录，建议收藏。收藏了，万一哪天就用上了。

今天要写一个官网，就创建了一个nuxt项目。我记得以前nuxt项目是可以选css预处理器的，但是现在没有了。

安装依赖

在这里我使用的是scss，因为sass安装的时候，依赖会比较麻烦。

安装依赖如下:

npm install sass sass-loader @nuxtjs/style-resources --save -dev

配置

安装完毕之后，在nuxt.config.js中，做如下配置

export default {
    modules: [
        // https://go.nuxtjs.dev/axios
        '@nuxtjs/axios',
      + '@nuxtjs/style-resources',
    ],

    + styleResources: {
    +     scss: [
    +       '@/assets/_var.scss'
    +     ]
    + },
}

错误1:

此时启动项目, 会出现报错如下:

# 报错Rule can only have one resource source (provided resource and test + include + exclude) in

经过在网上查找，发现可能是因为webpack的版本高了。

于是我删除了当前的webpack版本，又安装了webpack4.x的版本

npm uninstall webpack

npm install webpack@^4.0.0 --save-dev

错误2：

再次运行代码，发现报错如下：

# TypeError: this.getOptions is not a function

再次搜索，发现是sass-loader版本不匹配。

于是删除我的v12版本的sass-loader，重新安装v10的sass-loader。

npm uninstall sass-loader

npm install sass-loader@10

结果

期望

其实降级不是最优解，但是项目时间紧张，我就没有再去寻找最优解了。

如果有哪位大佬，在新版本的情况下，可以解决，希望可以分享一下，我必定会去一键三连。

----------------------------------华丽的分割线--------------------------------------------

听说 点赞 会带来好运。