有多少種方式可以將.less檔案轉換為.css檔案

Less給 CSS 加點料!Less （Leaner Style Sheets 的縮寫） 是一門向後相容的 CSS 擴充套件語言，因為 Less 和 CSS 非常像，學習很容易。而且 Less 僅對 CSS 語言增加了少許方便的擴充套件，這就是 Less 如此易學的原因之一。官方文件

lessc

1. 首先要安裝node環境
2. 全域性安裝npm/cnpm等等裝包工具
3. 這裡以npm為例子

npm install -g less
lessc styles.less styles.
 
css

WebStorm軟體

1. WebStorm可以將less檔案直接編譯成css
2. file->setting ->tool->file watchers. 選擇右上角的新增按鈕新增一個 less的監聽

使用less.js

1. (less.js網站下載地址)[https://cdnjs.cloudflare.com/ajax/libs/less.js/3.8.1/less.min.js]
2. 這是在瀏覽器環境中直接使用
3. 當載入完.css檔案時，它不會直接解析，而是看到了** type為"text/less" **才會進行解析，所以type必不可少

/*styles.less*/
@color: red;
body{
  color:@color;
}

<link rel="stylesheet" type="text/less" href="styles.less" />
<script src="less.min.js" ></script>
<script>
less.watch()  //不是必須的加上去，這是採用監聽模式
</script>

使用Koala軟體

1. 這是前端前處理器語言模型編譯工具
2. 下載地址
3. 可以跨平臺執行，操作很簡單,只需要將你編譯的檔案拖進來即可
   介面簡潔，使用簡單,能夠實時編譯

使用webpack

1. 有空會寫webpack的生產環境和開發環境的配置和我踩過的一些坑，因為需要比較長的時間，怕寫的不清楚，所以遲遲沒寫，在沉澱段時間，這裡先講如何使用webpack，對於初學前端應使用以上幾種，根據以下配置檔案自己裝包
2. 安裝好node環境，和裝包工具

npm i webpack webpack-cli -D //本地安裝webpack4

const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    entry:path.join(__dirname,'./src/main.js'),
    output:{
        path:path.join(__dirname,'./dist'),
        filename:'bundle.js'
    },
    plugins:[
        new htmlWebpackPlugin({
            template: path.join(__dirname, './src/index.html'),
            filename: 'index.html'
        })
    ],
    module:{
        rules:[
            {test:/\.css$/,use:['style-loader','css-loader']},
            {test:/\.scss$/,use:['style-loader','css-loader?modules&localIdentName=[name]_[local]-[hash:5]','sass-loader']},
            // {test:/\.less$/,use:['style-loader','css-loader','less-loader']},
            {
                test: /\.less$/,
                use: [{
                loader: 'style-loader',
                }, {
                loader: 'css-loader', // translates CSS into CommonJS
                }, {
                loader: 'less-loader', // compiles Less to CSS
                options: { // 使用ant design元件UI配置的主題
                    modifyVars: {
                    'primary-color': '#faad14',
                    'link-color': '#faad14',
                    'border-radius-base': '2px',
                    },
                    javascriptEnabled: true,
                },
                }]
            },
            {test:/\.(png|jpg|jpeg|bmp|gif)$/,use:'url-loader?limit=5000&name=img-[hash:8].[ext]'},
            //當圖片超過5000位元組，則以原來的名字顯示，防止圖片重複要加hash值
            {test:/\.jsx?$/,use:'babel-loader',exclude:/node_modules/},
        ]
    }
}

說明

學習less只需要把官方文件主要的敲一遍即可，sass和less差不多，最好都學習，對於你以後css模組化可能有幫助