将less文件转换成css文件

html-css014

将less文件转换成css文件,第1张

两种方式，分别为：1、手动生成；2、使用webstorm自动生成。 1、项目的文件结构 2、在less文件的根目录 Shift + 鼠标右键 + 选择‘在此处打开命令窗口’ 3、输入命令：lessc + 空格 + less文件名 如：lessc main.less 4、继续输入命令：lessc + 空格 + less文件名 + 空格 + 大于号 + 空格 + css文件名 如：lessc main.less >main.css1、File + Settings 2、Tools + File Watchers 3、点击‘确定’即可 4、当你修改less文件时，css文件将自动生成。

需要把importLoaders设置为2，也就是说：

{test:

/.less$/,

loader:

'style!css?importLoaders=2!autoprefixer!less'}

表明你在某个less文件中import进来的资源（其它的less文件）会被使用autoprefixer和less

这两个loader解析

如果按照你最开始的设置：

{test:

/.less$/,

loader:

'style!css?importLoaders=1!autoprefixer!less'}

表明你在某个less文件中import进来的资源（其它的less文件）只会被使用autoprefixer这一个loader解析，就会报错

webpack

css

loader中关于importLoaders的解释很不友好