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'>