# npm 方式 npm install -D sass # yarn 方式 yarn add -D sass # pnpm 方式 pnpm install sass
*, *:after, *:before { box-sizing: border-box; outline: none; } html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { font: inherit; font-size: 100%; margin: 0; padding: 0; vertical-align: baseline; border: 0; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; &:before, &:after { content: ''; content: none; } } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -.5em; } sub { bottom: -.25em; } table { border-spacing: 0; border-collapse: collapse; } input, textarea, button { font-family: inhert; font-size: inherit; color: inherit; } select { text-indent: .01px; text-overflow: ''; border: 0; border-radius: 0; -webkit-appearance: none; -moz-appearance: none; } select::-ms-expand { display: none; } code, pre { font-family: monospace, monospace; font-size: 1em; }• global.scss 全局样式文件 引入 reset.scss 文件,并根据项目情况添加一些全局可使用的原子类@import url("./reset.scss");
// 边距 .m-b-30 { margin-bottom: 30px; } // 堆代码 duidaima.com .m-l-5 { margin-left: 5px; } // 字体 .font600 { font-weight: 600; }• mixin.scss 全局的混合 mixin 样式文件 组件中经常会服用的多个属性整合到一起的,类似原子类// 定宽居中
@mixin mo { width: 1280px; margin: 0 auto; } // 弹性盒弹性项上下居中 @mixin flex { display: flex; align-items: center; } // 等级和地区样式 @mixin level-and-area { display: flex; flex-wrap: wrap; margin: 10px 0; color: gray; dd { margin-right: 20px; margin-bottom: 16px; cursor: pointer; &:hover, &.active { color: #4993f2; } } } // 单行文本溢出显示 ... @mixin ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }1.3 全局引入和配置
import { createApp } from 'vue' import App from '@/App.vue' // 引入全局样式文件 import '@/styles/global.scss const app = createApp(App) app.mount('#app')这里,reset.scss 文件已在 global.scss 中引入。
import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import path from 'path' // https://vitejs.dev/config/ export default defineConfig({ plugins: [vue()], resolve: { alias: { '@': path.resolve(__dirname, './src') } }, css: { preprocessorOptions: { // 这里配置 mixin.scss 混合文件的全局引入 scss: { additionalData: `@import "@/styles/mixin.scss";` } } } })1.4 组件内使用
<script setup lang='ts'> import { ref } from "vue"; const levels = ref([ { level: "全部" }, { level: "三级甲等" }, { level: "三级乙等" }, { level: "二级甲等" }, { level: "二级乙等" }, { level: "一级" } ]); const cutIdx = ref(0); </script> <template> <dl class="level"> <dt class="m-b-30">等级:</dt> <dd v-for="(item,index) in levels" :key="index" :class="index === cutIdx ? 'active' : ''" >{{ item.level }}</dd> </dl> </template> <style scoped lang='scss'> .level { @include level-and-area; } </style>
1. 下载安装一系列依赖 首先,webpack 需要下载一大堆的东西:
node-sass、sass-loader、style-loader、sass-resources-loadernpm install node-sass --save-dev npm install sass-loader --save-dev npm install style-loader --save-dev npm install sass-resources-loader --save-dev
2. 配置 vue.config.js 在 vue.config.js 中配置sass-resources-loader入口文件
const { defineConfig } = require('@vue/cli-service'); module.exports = defineConfig({ transpileDependencies: true, devServer: { proxy: { //代理配置 //... }, chainWebpack: config => { // sass-resources-loader 公共样式文件配置,可全局使用变量 const oneOfsMap = config.module.rule('scss').oneOfs.store oneOfsMap.forEach(item => { item .use('sass-resources-loader') .loader('sass-resources-loader') .options({ // 写入定义基础样式的scss文件路径 resources: [ './src/assets/styles/common.scss' ] }) .end() }) }, });3. 定义 scss 样式文件 src/styles/global.scss 文件定义变量代码// 定义样式变量
$html-root-font-size:14px $theme-color:gray4. 组件内使用//组件内使用
<style lang="scss" scoped> //样式变量使用 .more { color: $theme-color; font-size:$html-root-font-size; } </style>附:忽略ts类型检测
• 单行忽略
@ts-ignore async mounted(){ let num:number = 10; //@ts-ignore let {arr,map}= await conf.fun(); }
• 当前script内代码不需要ts校验
@ts-nocheck<script lang="ts"> // @ts-nocheck import { Vue, Watch, Options } from "vue-property-decorator"; </script>• 取消忽略全文 // @ts-check