vue 把＜style scoped lang=“less“＞ 单独写成less文件再导入使用

1 npm

npm install less-loader --save-dev

2 创建一个单独的 Less 文件，例如 app.less

<style scoped lang="less">
@import url('./app.less');
</style>

3 在 app.less 文件中，编写 Less 样式代码

.container {width: 500px;margin: 0 auto;
}select {width: 100%;padding: 10px;font-size: 16px;border-radius: 5px;border: 1px solid #ccc;
}

4 在 Vue 实例中引入该 Less 文件

import Vue from 'vue';
import App from './App.vue';
import './app.less';new Vue({el: '#app',render: h => h(App),
});

5 vue.config.js 文件中添加你所需的 Webpack 配置

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({transpileDependencies: true,configureWebpack: {module: {rules: [{test: /\.less$/,use: [{loader: 'vue-style-loader',},{loader: 'css-loader',},{loader: 'less-loader',},],},],},},css: {loaderOptions: {less: {javascriptEnabled: true,},},},
})

6 修改了配置文件要 重新

npn run serve