nuxt中使用sass

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

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

· 631 阅读

2 ·

版权

文章标签：

#sass #前端 #javascript #nuxt

练习专栏收录该内容

4 篇文章

订阅专栏

文章介绍了如何在Nuxt.js项目中安装和配置Sass及其相关依赖，包括`node-sass`和`sass-loader`。然后，通过在`nuxt.config.js`中引入`main.sass`文件，并创建样式规则。在测试页面`test.vue`中，导入并使用了`main.sass`，最终成功展示了样式的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装依赖

安装sass ，node-sass, sass-loader依赖

npm install sass node-sass sass-loader --save-dev

配置nuxt.config.js

module.exports = {
  css: [
    '~/assets/styles/main.sass'
  ]
}

创建main.sass文件

// ~/assets/styles/main.sass
$primary: #49240F
$secondary: #E4A79D
.back
background-color: $primary
.font
color: blue

使用main.sass

创建了一个测试页面用来使用main.sass

///pages/test.vue

<template>
  <div class="font back">test</div>
</template>

<style scoped lang="sass">
@import '~/assets/styles/main.sass'
</style>