码迷,mamicode.com
首页 > Web开发 > 详细

在vue中使用scss或less

时间:2019-02-21 18:50:55      阅读:258      评论:0      收藏:0      [点我收藏+]

标签:--   width   自定义   没有   style   strip   download   expand   hbuilder   

一:在vue中使用

01.npm install sass-loader node-sass --save-dev

02.<style scoped lang="scss"></style>

03.可以使用啦...

 

二:平时使用

0.1安装ruby

https://rubyinstaller.org/downloads/

安装步骤:https://www.sass.hk/install/

注:添加国内淘宝源使用

gem

sources -ahttps://gems.ruby-china.com/

0.2Hbuilder中配置

1.工具栏中依次选择:工具---预编译器设置

 

技术图片
 

2.如果设置中有sass,scss选项,则点击编辑;如果没有就新增一个

 

技术图片
 

3.只需要根据实际需求更改图片中的两个红框中的信息即可

其中:第一个红框是sass.bat的文件位置 默认在ruby安装位置中bin目录下

第二个红框是生成的css文件位置、命名方式及风格,直接复制下面这行文本即可

--no-cache %FileName% ../css/%FileBaseName%.css --style expanded

结尾的 –style compact是编译风格 有四个选项:nested expanded

compact compressed 。nested是默认的。风格区别参见开头sass安装链接中的文档。

 

两个红框信息填写完成后点击确定即可。

这时你在你的scss文件中ctrl+s保存时,会在同级目录下生成一个同名css文件。每次保存时都会更新。省去了手动编译的麻烦。

 

执行保存操作后在同级文件夹中生成同名css文件

 

技术图片
 

 

Less

01.全局安装less

npm install -g less

//自定义函数插件,按需求安装

npm i less-plugin-functions -g

02.在hbuider中使用

触发命令地址,安装less地址

例:D:\nodejs\node_global\lessc.cmd

命令参数:%FileName% %FileBaseName%.css

03.确定,开始使用

 

 

在vue中使用scss或less

cnpm install scss-loader scss -D

cnpm install less-loader less -D

在vue中使用scss或less

标签:--   width   自定义   没有   style   strip   download   expand   hbuilder   

原文地址:https://www.cnblogs.com/thbt/p/10414467.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!