1、在src目录下,新建styles文件夹,在里面新建variables.scss,然后添加一些变量 2、在vue文件中的直接使用 .form { background-color: $blue; width: 200px; height: 200px; }
配置vite.config的css预处理的选项! css:{preprocessorOptions: {scss: {additionalData:`@use "src/assets/style/globalColor.scss" as *;`} } } 可在任意scss文件中使用
一、vue3 中集成 scss 1. 安装依赖 npm install sass -D 2. 定义全局样式 新建src\assets\base.scss 全局样式文件 $bgColor:#ccc; 在vite.config.js 中配置 import{fileURLToPath,URL}from"node:url";import{defineConfig}from"vite";importvuefrom"@vitejs/plugin-vue";// https://vitejs.dev/config/...
exportdefaultdefineConfig({plugins:[vue()],css:{// css预处理器preprocessorOptions:{scss:{// 此处修改为要被预处理的scss文件地址additionalData:'@import "./src/index.scss";'}}}) 注意 在scss文件中的图片或者字体地址路径尽量使用绝对地址,不然文件可能会找不到。 7.vite配置rollup进行代码拆分 rollup官...
配置vite.config.ts //全局csscss: { preprocessorOptions: { scss: { additionalData:'@import "./src/assets/scss/global.scss";'//添加公共样式} } 使用 global.scss $orange: #FFA500; HelloWorld.vu .count{background-color:$orange; }
传递给 CSS 预处理器的配置选项,这些配置会传递到预处理器的执行参数中去。例如,在 scss 中定义一个全局变量: 复制 //vite.config.jsimport{defineConfig}from'vite'// 使用defineConfig工具函数获取类型提示:exportdefaultdefineConfig({css: {preprocessorOptions: {scss: {additionalData: `$injectedColor:orange;...
第一种.scss更符合css,所以我们使用.scss 首先安装sass yarn add sass 修改css文件名为.scss app.scss //在js文件中引入scss import './app.scss' 使用CSS Modules 在Vite项目中,CSS Modules是默认启用的,所以你无需额外的配置 1.修改scss文件名为 App.module.scss ...
可能是因为sass版本过高导致的。 卸载sass,试试安装版本低一些的sass。 本次示例使用的sass@1.32.6版本。 当在main.ts中引入后,发现在vite配置引入的scss样式应用成功。 可能是项目中引用scss文件时才会触发vite的scss配置,具体原理尚未搞清,在此给遇到此问题的新手一个解决参考。
现在,我们来深入学习它的第二个可配置项preprocessorOptions-预处理器配置项。顾名思义,这个选项是用来配置less、scss、stylus等预处理器的。假设我们项目中用到了less和sass,那么配置项可能长这样: exportdefaultdefineConfig({css: {// css模块化配置项modules:{// ...}// 预处理器配置项preprocessorOptions: {...