vue中如何使用less和sass

vue中使用less

当所有东西都 准备好之后 ：

第一步：

安装less依赖，npm install less less-loader --save

第二步：

安装less依赖，npm install -g less

第三步：

main.js 全局引入

var Less = require('Less');
 
第四步：
 
在组件中 
<style scoped lang="less">
    @width: 100%;
    @height: 100px;
    @color: red;
  .container{
   width: @width;
   height: @height;
   background-color: @color;
   margin-bottom: 5px;
   };
</style>

sass使用

在项目中安装Sass 
1 npm install node-sass --save-dev
2 npm install sass-loader --save-dev

配置Sass解析器
在webpack.base.conf.js中module节点中配置
module: {
 2     loaders: [
 3             {
 4                 test: /\.js$/,
 5                 exclude: /(node_modules|bower_components)/,
 6                 loader: 'babel',
 7                 query: {
 8                     presets: ['es2015']
 9                 }
10             }
11         ],
12 }

同样是在webpack.base.conf.js中，modules结节下的rules节点中添加sass的解析器
module: {
2     rules: [
3        {  
4         test: /\.scss$/,
5         loaders: ["style", "css", "sass"]
6       },
   ]
}

尝试使用Sass的SASS语法
<style lang="sass">
   $body-color: red;
   .body{
   color: $body-color;
   }      
</style>

尝试使用Sass的SCSS语法
<style lang="scss">
  $body-color:red;
   .body {
     color: $body-color;
   }
</style>