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个，须要的话也是同样的安装。