(十一)Less 文件的打包和分离

本节知识点

• 分离Less 和less文件的打包

(一) 打包Less文件

• 安装less包

npm install less --save-dev

• 安装Less-loader

npm install less-loader --save-dev

(二) 去webpack.config.js里面编写loader配置

• 当然了要是解析成css还需要style-loader和css-loader

     {
                test:/\.less$/,
                use:[
                    {
                        loader:"style-loader"
                    },
                    {
                        loader:"css-loader"
                    },
                    {
                        loader:"less-loader"
                    }
                ]
            }

• 然后去css目录下面新建一个less文件比如black.less

@base :#000;
#gogo{
  width:300px;
  height:300px;
  background:@base;
}

• 然后在把这个文件引入到入口文件

import less from "./css/black.less";

• 然后打包就可以了

• 有的时候我们也有需求想要分离LESS文件

利用extract-text-webpack-plugin这个插件

   //增加less模块
            {
                test:/\.less$/,
                use: extracTextPlugin.extract({
                    use:[
                        {
                            loader:"css-loader"
                        },
                        {
                            loader:"less-loader"
                        }
                    ],
                    fallback:"style-loader"
                })
            }

这样你会发现less被分离到index.css文件下