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