vue中使用LESS、SASS、stylus

less的使用

• npm install less less-loader --save
• 修改webpack.config.js文件。vue.cli 搭建项目可跳过此步

{

test: /\.less$/,

loader: "style-loader!css-loader!less-loader",

},

• 组件内，设置 <style lang='less'>

SASS的使用

• npm i node-sass sass-loader -s
• 修改webpack.config.js文件

{
        test: /\.scss$/,
        loaders: ["style", "css", "sass"]
      },

• 组件内，设置<style lang='scss'>。scss与sass只是 语法规范不一样，具体 使用可根据个人习惯。

stylus的使用

• npm i stylus stylus-loader -s
• 组件内，设置<style lang='stylus'>