在vue中使用scss或less

一：在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