一、安装依赖 npm install -D sass sass-loader 二、配置vite.config.ts export default defineConfig({ plugins: [ vue(), ], css: { preprocessorOptions: { scss: { additionalData: '@import "@/styles/variables.scss";', javascriptEnabled: true } } }, resolve: { alias: { '@': fileURLToPa...
注意:Vite在内部已经处理了SCSS的编译,因此你通常不需要额外安装sass-loader,这是Webpack特有的配置。 2. 在vite配置文件中添加对scss的支持 实际上,Vite默认就支持SCSS,所以你通常不需要在vite.config.ts(或vite.config.js)文件中做特别的配置来启用SCSS。但是,如果你需要为所有SCSS文件添加全局变量或mixin,你可以...
npm install --save-dev sass-loader node-sass sass 在src/assets/scss文件配置global.scss文件 配置vite.config.ts //全局csscss: { preprocessorOptions: { scss: { additionalData:'@import "./src/assets/scss/global.scss";'//添加公共样式} } 使用 global.scss $orange: #FFA500; HelloWorld.vu ....
npm install --save-devsass-loader npm install --save-devnode-sass npm install --save-dev sass 打开vite.config.ts,添加下边代码,并重启服务 module.exports= { cssPreprocessOptions: { scss: { additionalData:'@import "./src/assets/scss/style.scss";'// 添加公共样式} } } 页面中使用 $redbg:...
npm install -D sass-loader node-sass sass vite.config.ts配置全局scss // 全局csscss:{preprocessorOptions:{scss:{additionalData:`./src/assets/scss/global.scss";`,}}}, global.scss: $orange: #FFA500; helloPage.vue: .container { background-color: $orange; } CSS 预处理器 ©著作权归作者...