文章目录
一、安装sass
npm i sass
二、创建src/styles/index.scss
内容如下:
// 引入清楚全局默认样式
@import 'reset.scss'
reset.scss的内容
npm上搜索reset.scss
三、入口文件引入src/styles/index.scss
import '@/styles/index.scss'
重置样式生效,但是无法给项目引入全局变量$
四、在style/variable.scss创建一个variable.scss文件
// 给项目提供的scss全局变量
$mycolor:red;
五、在vite.config.ts文件配置如下:
export default defineConfig({
plugins: [
vue(),
// scss全局变量的一个配置
css: {
preprocessorOptions: {
scss: {
javascriptEnabled: true,
additionalData: '@import "./src/styles/variable.scss";',
},
},
},
})