在NuxtJS中使用scss语法

最新推荐文章于 2024-05-03 11:24:26 发布

KwongSum

最新推荐文章于 2024-05-03 11:24:26 发布

阅读量800

点赞数 4

分类专栏： NuxtJS 文章标签： scss 前端 vue

本文链接：https://blog.csdn.net/qq_31569459/article/details/129155050

版权

NuxtJS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章介绍了如何在NuxtJS项目中安装和配置SASS，包括指定sass-loader版本以避免兼容问题，创建并引用全局scss文件，以及在页面中使用scss语法。此外，还提到通过nuxtjs/style-resources插件使全局scss变量生效，以及优化CSS提取以防止页面样式过长。

摘要由CSDN通过智能技术生成

官方文档：预处理器 - NuxtJS | Nuxt.js 中文网

一、安装SASS

这里要指定sass-loader版本，最新版本可能会存在webpack、nuxt版本不兼容问题
提一嘴不要需要安装node-sass，坑

npm i -D sass-loader@^10 sass

二、配置nuxt.config.js

新建common.scss文件，设置全局样式比如主题色，字体大小什么的

static/css/common.scss

/*
整体颜色
*/
$default: #F34B48; //站点主题
$black: #333333; //主要字体
$gray: #606060; //次要字体
$border-color:#E5E5E5;//边框颜色
/*
布局
*/
$container: 1200px;

scss文件要在全局使用的话在nuxt.config.js引用一下

nuxt.config.js

css: [
    'element-ui/lib/theme-chalk/index.css', //饿了么UI库
    '@/static/css/common.scss' //自定义全局scss文件
  ],

三、页面使用

注意：一定要写上lang="scss"才可以使用scss语法

pages/index.vue

<style lang="scss">
    .container{
      width: $container;
      height: 500px;
      margin: 0 auto;
    }
</style>

这时候会发现在页面中还不能使用全局定义的scss变量，还需要一个插件@nuxtjs/style-resources

npm i @nuxtjs/style-resources -D

在nuxt.config.js中配置

nuxt.config.js

modules: [
    '@nuxtjs/axios', 
    '@nuxtjs/proxy',
    '@nuxtjs/style-resources'
  ],
  styleResources: {
    scss: [
      //把全局样式放到这里，同时把css节点中引用的scss删除
      '@/static/css/common.scss'
    ]
  },

四、防止页面样式CSS太长

设置extractCSS为true、设置optimization对象

nuxt.config.js

build: {
    transpile: [/^element-ui/],
    vendor: ["axios"],
    //将style集到一起
    extractCSS: true,
    optimization: {
      splitChunks: {
        cacheGroups: {
          styles: {
            name: 'styles',
            test: /\.(css|vue)$/,
            chunks: 'all',
            enforce: true
          }
        }
      }
    }
  },