如何编译.less文件（less.js）

有多少种方式可以将.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模块化可能有帮助