关于vue.js:Nuxt如何使用scss预编译器

11次阅读

共计 899 个字符,预计需要花费 3 分钟才能阅读完成。

写在后面

网上看了一堆文章,乌七八糟的坑,最初也没搞进去,最初本人参考官网文档搞进去了。

官网文档: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 目录,并创立空文件夹

第 4 步 在 style 里加货色就能够应用了

<style lang="scss" scoped>
div{color: red;}
</style>
正文完
 0