本节知识点
- 分离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文件下
