如何在vue-cli 3中设置CSS背景？

在vue-cli 3中设置CSS背景可以通过以下步骤实现：

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

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `@import "@/assets/styles/variables.scss";`
      }
    }
  }
}

这段代码的作用是将variables.scss文件引入到所有的组件中。

在Vue项目的src/assets/styles目录下创建一个名为variables.scss的文件，并在该文件中定义你想要设置的CSS背景样式，例如：

$background-color: #f0f0f0;

body {
  background-color: $background-color;
}

<template>
  <div class="app">
    <!-- 页面内容 -->
  </div>
</template>

<style lang="scss">
.app {
  background-color: $background-color;
}
</style>

这样，你就成功地在Vue项目中设置了CSS背景。请注意，以上步骤假设你已经熟悉Vue开发，并且已经安装了Vue CLI 3。如果你对Vue CLI 3不熟悉，可以参考Vue CLI官方文档（https://cli.vuejs.org/）了解更多信息。

页面内容是否对你有帮助？

有帮助

没帮助

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云