[绍棠] nuxt中scss使用并可全局使用变量

最新推荐文章于 2024-01-23 18:53:58 发布

绍棠

最新推荐文章于 2024-01-23 18:53:58 发布

阅读量1k

点赞数 2

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

本文链接：https://blog.csdn.net/happyshaotang2/article/details/121350868

版权

前端专栏收录该内容

37 篇文章

订阅专栏

1.插件安装：

npm install css-loader node-sass postcss-loader sass-loader style-loader --save -dev

2.在项目的assets目录下新建一个css目录，然后在该目录下新建一个index.scss文件，用这个文件作为scss的入口文件，在这个文件里引入其他的scss即可，例如：

3.nuxt.config.js中配置：

module.exports {
	css: [
	    {src: '~static/css/index.scss', lang: 'scss'} // 指定
	  ],
}

经过以上配置发现，index.scss中的样式可以在项目中使用了，但遇到了一个问题：
index.scss中的变量不能再页面中直接使用，需要在页面中单独引入才能使用，很麻烦。

4.scss变量全局使用：
参考文档：官网

npm install @nuxtjs/style-resources

nuxt.config.js

module.exports {
	css: [
	    {src: '~static/css/index.scss', lang: 'scss'} // 指定
	  ],
	modules: [
	    // Doc: https://axios.nuxtjs.org/usage
	    '@nuxtjs/axios',
	    '@nuxtjs/style-resources'
	  ],
	  styleResources: {
	    scss: './static/css/index.scss'
	  },
}

然后页面中就可以直接使用啦：

<template>
  <div class="login">
    <div class="login-top">
      
    </div>
  </div>
</template>
<script>
  
</script>
<style lang="scss" scoped>
.login-top {
  height: 3.2rem;
  background: $tmColor;
}
</style>