将less文件转换成css文件

html-css018

将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文件将自动生成。

Grunt任务分为两部分,一部分是任务,即Grunt要执行的代码,找到对应功能的插件就成。所以等会要下载grunt-contrib-less包,这个插件便是把less文件编译成能直接使用的css。另一部分是配置,即传给grunt.initConfig方法的对象。

步骤一:在终端安装插件 

同样使用到了node.js里的包管理器npm,在终端里执行下述命令:

npm install grunt-contrib-less --save-dev

–save-dev”的意思是,在当前目录安装grunt的同时,顺便把grunt保存为这个目录的开发依赖项。要注意安装的目录应该是你的项目的根目录,而且本地已经装好了grunt,建立了package.json文件。package.json文件中无法包含全局安装的包,因此Grunt包和任务插件要求在本地安装Grunt,这样代码才能在不同设备中正常运行。

步骤二:在Gruntfile.js文件中加载插件

grunt.loadNpmTasks('grunt-contrib-less')

步骤三:配置任务

 grunt.initConfig({

       less:{

         compile:{

             file:{

                  'build/css/compiled.css':'src/css/layout.css'

                  }

                 }

            }

    })

步骤四:终端执行grunt less命令 

建议明确指定任务的构建目标,本例中方式为grunt less:compile。此时在build/css文件夹里便生成了compiled.css。less对象还有其他的属性,你还可以添加一个compile_mobile目标,编译移动设备使用的css静态资源。

步骤五:精确通配模式

通配是一种文件路匹配机制,可以使用文件路径模式来包含或排除文件。下面列出一些有用的通配模式:

['public/*.less',   //匹配public文件夹中拓展名为.less的所有文件'public/**.*.less',     //还能匹配public文件夹的子文件中的文件,

                        //而且嵌套层级多深

 '!public/vendor/**/*.less  //和第二个作用一样,不过!符号表明

                            // 要从结果中排除匹配的文件

 ]

有一点需要注意的是,不管多少个less文件,编译得到的css都只会打包到一个文件中。