整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
、安裝node.js:
下載地址（node.js中文網）：http://nodejs.cn/download/
安裝方式使用默認安裝即可。在cmd中輸入node -v 和 npm -v如果成功顯示了版本號，node.js安裝成功。如圖：
2、使用node.js 安裝
在命令窗口中輸入： npm install -g less 進行less的安裝。
3、配置webstorm
打開webstorm, File——Settings——Tools——File Watchers——點擊 加號——選擇less
默認設置即可，點擊ok ,就可以了
4、創建less文件，直接創建文件添加后綴名為.less的文件即可。
或者創建css文件，選擇less也就可以了。
創建成功后，同時在less中生成css同名文件。配置及完成。
ess（Leaner Style Sheets 的縮寫）是一種向后兼容的 CSS 語言擴展。Less.js 是將 Less 樣式轉換為 CSS 樣式的 JavaScript 工具。
npm i less less-loader -D
安裝 less less-loader
/src/assets/styles/base.less
@bg: #f7f7f7;
.p {
color: red;
}// ...
export default defineConfig({
// ...
css: {
preprocessorOptions: {
less: {
modifyVars: {
hack: `true; @import (reference) "${resolve('src/assets/styles/base.less')}";`,
},
javascriptEnabled: true,
},
},
},
})<template>
<h3>Less樣式</h3>
<p>這使用了base.less的樣式</p>
</template>
<style lang="less" scoped>
h3 {
background-color: @bg;
}
p {
.p()
}
</style>// ...
const pLess = () => import('@v/test/less.vue')
const testRoutes = [
{
path: '/less',
name: 'less',
meta: {
title: 'less',
},
component: pLess,
},
// ...
]<template>
<main>
<nav class="nav">
<router-link to="/less" active-class="on">less全局引入</router-link>
// ...啟動項目查看 npm run dev
效果
----- End -----
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
