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

向右看齐 2022-04-12 12:48 252阅读 0赞

# 有多少种方式可以将.less文件转换为.css文件 #

> > Less给 CSS 加点料!Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言，因为 Less 和 CSS 非常像，学习很容易。而且 Less 仅对 CSS 语言增加了少许方便的扩展，这就是 Less 如此易学的原因之一。[官方文档][Link 1]

## 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][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;
    }

## 使用Koala软件 ##

1.  这是前端预处理器语言模型编译工具
2.  [下载地址][Link 2]
3.  可以跨平台运行，操作很简单,只需要将你编译的文件拖进来即可  
    界面简洁，使用简单,能够实时编译![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70]

## 使用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模块化可能有帮助

[Link 1]: https://less.bootcss.com/
[https_cdnjs.cloudflare.com_ajax_libs_less.js_3.8.1_less.min.js]: https://cdnjs.cloudflare.com/ajax/libs/less.js/3.8.1/less.min.js
[Link 2]: http://koala-app.com/index-zh.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70]: /images/20220412/d4f63c6ddeb04e3ab54ea99f7a520f9e.png