CSS 預處理器「LESS」

一、介紹

LESS 目的是擴充 CSS 語法，但無法直接被瀏覽器所使用，必須再經過 LESS 直譯器處理成 CSS 語法才可被瀏覽器支援，因此類似 CSS 的語法糖。

二、專案架構

圖、Visual Studio 2019 專案架構

三、安裝

圖、開啟命令提攜字元 > 切換到專案資料夾 > 輸入指令 yarn add less less-loader css-loader style-loader




• 指令

yarn add less less-loader css-loader style-loader

四、操作步驟

圖、新增 main.less

• 原始碼

@width: 10px;
@height: @width + 10px;

#header {
  width: @width;
  height: @height;
}

圖、修改 main.js

• 原始碼

const path = require('path');
const glob = require('glob');

let exps = [
    {
        entry: glob.sync("./Src/Less/**/*.less"),
        output: {
            filename: 'main.css',
            path: path.resolve("./Content/Target/Css"),
        },
        module: {
            rules: [
                {
                    test: /\.less$/,
                    use: [
                        {
                            loader: "style-loader",
                        },
                        {
                            loader: "css-loader",
                        },
                        {
                            loader: "less-loader",
                            options: {
                                lessOptions: {
                                    strictMath: true,
                                },
                            },
                        },
                    ],
                },
            ],
        },
    },
];

module.exports = exps;

圖、命令提攜字元 > 輸入指令 yarn dev

圖、執行結果

五、相關連結

1. 使用「Visual Studio 2019」建置一個有 Mvc 和 Web Api 架構的網站
2. 讓 JavaScript 能在伺服器端執行的環境 「node.js」
3. 快速的套件管理工具「Yarn」
4. 開源的前端打包工具「Webpack」
5. 「vue」和「webpack」碰出的火花

六、參考

1. less-loader