Nuxt如何使用scss预编译器 Nuxt如何使用scss预编译器

写在前面
网上看了一堆文章，乱七八糟的坑，最后也没搞出来，最后自己参考官方文档搞出来了。
官方文档：https://www.nuxtjs.cn/faq/pre...
下面是我自己摸索出来的步骤：
第1步修改package.json文件：
很奇怪，直接不加版本号安装的版本12.1.0经常用起来爆错，网上好多文章也说版本太高的问题，我一直用的这个版本，感觉不错。

"dependencies": { "@nuxtjs/style-resources": "^1.2.1", "core-js": "^3.15.1", "element-ui": "^2.15.2", "nuxt": "^2.15.7" }, "devDependencies": { "node-sass": "^4.12.0", "sass-loader": "^7.1.0" }

【Nuxt如何使用scss预编译器】话说应该也可以放到这里,可以试试

"dependencies": { "@nuxtjs/style-resources": "^1.2.1", "core-js": "^3.15.1", "element-ui": "^2.15.2", "nuxt": "^2.15.7", "node-sass": "^4.12.0", "sass-loader": "^7.1.0" }, "devDependencies": { }

第2步修改nuxt.config.js的css数组如下：

// Global CSS: https://go.nuxtjs.dev/config-css css: [ 'element-ui/lib/theme-chalk/index.css',//这是饿了么组件库的，不用管//下面这两个是scss用得到的 // 直接加载一个 Node.js 模块。（在这里它是一个 Sass 文件） // 项目里要用的 CSS 文件 '@/assets/css/main.css', // 项目里要使用的 SCSS 文件 '@/assets/css/main.scss' ],

第3步创建assets目录和css目录，并创建空文件夹