windows系統(tǒng)中webstorm使用less 步驟

、安裝node.js:

下載地址（node.js中文網(wǎng)）：http://nodejs.cn/download/

安裝方式使用默認(rèn)安裝即可。在cmd中輸入node -v 和 npm -v如果成功顯示了版本號，node.js安裝成功。如圖：

2、使用node.js 安裝

在命令窗口中輸入： npm install -g less 進(jìn)行l(wèi)ess的安裝。

3、配置webstorm

打開webstorm, File——Settings——Tools——File Watchers——點(diǎn)擊加號——選擇less

默認(rèn)設(shè)置即可，點(diǎn)擊ok ,就可以了

4、創(chuàng)建less文件，直接創(chuàng)建文件添加后綴名為.less的文件即可。

或者創(chuàng)建css文件，選擇less也就可以了。

創(chuàng)建成功后，同時(shí)在less中生成css同名文件。配置及完成。

ess（Leaner Style Sheets 的縮寫）是一種向后兼容的 CSS 語言擴(kuò)展。Less.js 是將 Less 樣式轉(zhuǎn)換為 CSS 樣式的 JavaScript 工具。

安裝依賴：less less-loader

npm i less less-loader -D

安裝 less less-loader

添加公共 less 樣式文件 base.less

/src/assets/styles/base.less

@bg: #f7f7f7;
.p {
    color: red;
}

在 /vite.config.js 中配置 css 項(xiàng)

// ...
export default defineConfig({
    // ...
    css: {
        preprocessorOptions: {
            less: {
                modifyVars: {
                    hack: `true; @import (reference) "${resolve('src/assets/styles/base.less')}";`,
                },
                javascriptEnabled: true,
            },
        },
    },
})

添加測試頁 /src/view/test/less.vue

<template>
    <h3>Less樣式</h3>
    <p>這使用了base.less的樣式</p>
</template>
<style lang="less" scoped>
h3 {
    background-color: @bg;
}
p {
    .p()
}
</style>

在 /src/router/test.js 中添加路由

// ...
const pLess = () => import('@v/test/less.vue')
const testRoutes = [
    {
        path: '/less',
        name: 'less',
        meta: {
            title: 'less',
        },
        component: pLess,
    },
  // ...
]

在 /App.vue 中添加鏈接按鈕

<template>
    <main>
        <nav class="nav">
            <router-link to="/less" active-class="on">less全局引入</router-link>
// ...

啟動(dòng)項(xiàng)目查看 npm run dev

效果

----- End -----

者：oscicen
使用技術(shù)：HTML / CSS / JavaScript
依賴庫：-
瀏覽器兼容：Chrome, Edge, Firefox, Opera, Safari
響應(yīng)式：否
源碼鏈接：https://codepen.io/oscicen/pen/zyJeJw

作者：Guilmain Dorian
使用技術(shù)：HTML (Pug) / CSS (Less) / JavaScript
依賴庫：-
瀏覽器兼容：Chrome, Edge, Firefox (partial), Opera, Safari
響應(yīng)式：否
源碼鏈接：https://codepen.io/Craaftx/pen/yQGpwa

作者：Adrian Payne
使用技術(shù)：HTML / CSS (SCSS) / JavaScript (Babel)
依賴庫：-
瀏覽器兼容：Chrome, Edge, Firefox, Opera, Safari
響應(yīng)式：是
源碼鏈接：https://codepen.io/dazulu/pen/VVZrQv

作者：Alex O’Neal
使用技術(shù)：HTML / CSS
依賴庫：-
瀏覽器兼容：Chrome, Edge, Firefox, Opera, Safari
響應(yīng)式：是
源碼鏈接：https://codepen.io/alexoneal/pen/OBqaoe

作者：Sil van Diepen
使用技術(shù)：HTML (Pug) / CSS (SCSS)
依賴庫：-
瀏覽器兼容：Chrome, Edge, Firefox, Opera, Safari
響應(yīng)式：是
源碼鏈接：https://codepen.io/silvandiepen/full/NOboze

作者：Yago Estévez
使用技術(shù)：HTML (Pug) / CSS
依賴庫：-
瀏覽器兼容：Chrome, Edge, Firefox, Opera, Safari
響應(yīng)式：是
源碼鏈接：https://codepen.io/yagoestevez/full/EdgRMX

作者：jakob-e
使用技術(shù)：HTML / CSS (SCSS) / JavaScript
依賴庫：
瀏覽器兼容：Chrome, Firefox, Opera, Safari
響應(yīng)式：是
源碼鏈接：https://codepen.io/jakob-e/pen/ELqeRM

作者：Casey Callis
使用技術(shù)：HTML / CSS / JavaScript
依賴庫：jquery.js, parallax.js
瀏覽器兼容：Chrome, Edge, Firefox, Opera, Safari
響應(yīng)式：是
源碼鏈接：https://codepen.io/caseycallis/full/pwEWxo

在線咨詢

上一篇：HTML 鏈接
下一篇：這段 JavaScript 代碼能挖出你所有的訪問記錄！

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商