vite2+vue3使用公共自定义样式less
vite.config.js文件
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// vite.config.js 文件
import eslintPlugin from 'vite-plugin-eslint'
// const resolve = dir => path.join(__dirname, dir)
const path = require('path')
export default defineConfig({
plugins: [
vue(),
eslintPlugin({
include: ['src/**/*.js', 'src/**/*.vue', 'src/*.js', 'src/*.vue']
})
],
resolve: {
alias: {
'/@/': path.resolve('./src'),
'_components': path.resolve('./src/components'),
'_utils': path.resolve('./src/utils'),
'_common': path.resolve('./src/common'),
'_hooks': path.resolve('./src/hooks'),
'_mock': path.resolve('./src/mock')
}
},
optimizeDeps: {
include: ['echarts']
},
server: {
hmr: true
},
// 以下部分是配置公用less的代码
css: {
preprocessorOptions: {
less: {
additionalData: `@import './src/assets/css/shareStyle.less';`
}
}
}
})
shareStyle.less文件
其他的颜色啥的都是通用的,后续自己设置
/* // 字体渐变 */
.gradient_font() {
/* 将背景设为渐变 */
background-image: -webkit-linear-gradient(top, white, white, rgb(157, 250, 245), rgb(8, 202, 193));
/* 规定背景绘制区域 */
-webkit-background-clip: text;
/* 将文字隐藏 */
-webkit-text-fill-color: transparent;
font-weight: 800;
}
页面a.vue使用
.work_order {
// 调用公共样式
.gradient_font();
}
后记:
之前踩坑一直用的都是vuecli的
用的这种,但是并没有成功
const path = require('path')
module.exports = {
pluginOptions: {
'style-resources-loader': {
preProcessor: 'less',
patterns: [
// 注意路径,不能使用配置中的别名路径(例如:alias 配置下的路径别名)
path.resolve(__dirname, 'src/assets/styles/variable.less'),
]
}
}
}
然后查到了这个尝试了一下vue3+vite引入sass mixin报错: Undefined mixin.
试着更改了就成功了