webpack-配置處理less 檔案的loader

Less 是一門 CSS 預處理語言，它擴充了 CSS 語言，增加了諸如變量、混合（mixin）、函數等功能，讓 CSS 更易維護、友善制作主題、擴充。

安裝 less-loader

npm i less-loader -D
           

安裝依賴包less，

npm i less -D
           

定義less比對規則

module: {//這個節點用于配置所有的第三方子產品加載器
        rules:[//所有第三方子產品的比對規則
            {test: /\.css$/,use:['style-loader','css-loader']}
            //test 代碼是比對規則， 我們用的是.css 需要用 loader 處理。
            ,{test: /\.less$/,user:['style-loader','css-loader','less-loader']}
            //由于less 檔案也是一種樣式，也是需要用到 css 處理子產品 

        ]

    },
           

導入 less 檔案

在 Css 檔案夾 裡 建立 index.less檔案 ，并寫入樣式 ：

th {
    background-color: #09c;
    font: bold 16px "微軟雅黑";
    color: #fff;
}
           

在main.js

導入 less檔案

import './CSS/index.less'