vue項目中npm安裝sass,less,stylus

用vue-cli腳手架搭建出來的，默認是用標準css的。若是你想用sass,less,stylus就須要本身手動安裝一下了。

進入項目文件夾，而後安裝（這裏以stylus爲例）stylus和stylus-loader，安裝後面須要加上--save-dev，這樣纔會被添加到packjson文件中。

npm install stylus stylus-loader --save-dev

安裝成功後，打開 build/webpack.base.conf.js ，在 module.exports = 的對象的 module.rules 後面添加一段：

（好像不加也能夠，我試過不加，也能編譯出來，由於在build/utils中寫了，爲了避免必要麻煩，仍是加下吧）

module.exports = {
    //  此處省略無數行，已有的的其餘的內容
    module: {
        rules: [
          //  此處省略無數行，已有的的其餘的規則
          {
            test: /\.styl$/,
            loader: "style-loader!css-loader!stylus-loader",
          }
        ]
    }
}

這樣在style後加上lang=stylus，就能夠愉快的使用了。

<style lang='stylus' scoped><style/>

 

其餘那2個，須要的話也是同樣的安裝。