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個，需要的話也是一樣的安裝。