vue.config.js配置scss

古风GF

于 2023-03-30 16:50:28 发布

阅读量917

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript vue.js scss

文章讲述了在Vue项目中如何设置scss的版本并导入样式文件。通过在vue.config.js中配置css的loaderOptions，特别是sass部分，添加prependData以引入公共scss文件。这样可以确保全局变量如$Color的有效使用，例如在.text类中设置颜色。

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

首先下载好scss对应的版本

style/index.scss

$Color:#FFFFFF;

main.js

import './style/index.scss'

vue.config.js

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `@import "@/style/public.scss";`
      }
    }
  }
}

使用

 <div class="text">111</div>

 .text{
    color:$Color;
  }