Stylus是一個CSS預處理器。

Stylus安裝包安裝：

dell@DESKTOP-KD0EJ4H MINGW64 /f/gsff-frone
$ cnpm install stylus --save-dev
√ Installed 1 packages
√ Linked 14 latest versions
√ Run 0 scripts
√ All packages installed (7 packages installed from npm registry, used 1s(network 997ms), speed 60.55kB/s, json 15(39.1kB), tarball 21.26kB)

dell@DESKTOP-KD0EJ4H MINGW64 /f/gsff-frone
$ cnpm install stylus-loader --save-dev
√ Installed 1 packages
√ Linked 4 latest versions
√ Run 0 scripts
√ All packages installed (3 packages installed from npm registry, used 511ms(network 506ms), speed 42.89kB/s, json 5(21.7kB), tarball 0B)

安裝說明：為什么使用--save-dev

1. --save-dev 是將模塊安裝到項目目錄下，并在package文件的devDependencies節點寫入依賴。

2. devDependencies 節點下的模塊是我們在開發時需要用的，比如本次安裝的css預處理器stylus。這些模塊在我們的項目部署后是不需要的。

stylus的使用：

1. 在.vue文件里面直接使用，只要在style標簽加上lang="stylus"即可:

<style lang="stylus">
    $mainCol = #000;
    h1 {
        color: $mainCol;
        }
</style>

2. 引用.styl文件的方式也有兩種：

<script>
    //引入方法一：
    import "@/assets/css/public/common.styl";
</script>

<style lang="stylus">
     //引入方法二：
   @import "../assets/css/public/common.styl";   //這里使用相對路徑
}

兩者的區別：

（1）在script標簽內引入的styl文件，里面的圖片路徑是相對于當前的.styl文件的

（2）在style 標簽引入的.styl文件是相對當前的.vue文件的

3. 具體的語法可參考 張鑫旭的stylus中文版參考文檔之綜述

4. calc屬性使用stylus變量的用法：

$width = 100px;
 "calc( 100% - %s)" % $width;

5.

如何在vue中全局引入stylus文件的公共變量

總結

以上是生活随笔為你收集整理的在vue项目中stylus的安装及使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。