Nuxt如何使用scss预编译器

Kason

写在前面

网上看了一堆文章,乱七八糟的坑,最后也没搞出来,最后自己参考官方文档搞出来了。

官方文档: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"
  }

话说应该也可以放到这里,可以试试


  "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目录,并创建空文件夹

image.png

第4步 在style里加东西就可以使用了

<style lang="scss" scoped>
div{
  color: red;
}
</style>
阅读 1.4k
153 声望
4 粉丝
0 条评论
153 声望
4 粉丝
文章目录
宣传栏