1 npm
npm install less-loader --save-dev
2?創(chuàng)建一個(gè)單獨(dú)的 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 實(shí)例中引入該 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文章來源地址http://www.zghlxwxcb.cn/news/detail-631677.html
文章來源：http://www.zghlxwxcb.cn/news/detail-631677.html
到了這里，關(guān)于vue 把＜style scoped lang=“l(fā)ess“＞ 單獨(dú)寫成less文件再導(dǎo)入使用的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![使用vscode在vue項(xiàng)目中重命名文件選擇了更新導(dǎo)入路徑仍有部分導(dǎo)入路徑?jīng)]有更新](https://imgs.yssmx.com/Uploads/2024/02/654187-1.png)
