sass的使用

sass的使用（vue3）

安装

npm i sass sass-loader@10.1.1 -D

npm install -g cnpm --registry=https://registry.npm.taobao.org

cnpm install node-sass@7.0.1

 

使用

 

$font:16px;
$color:red;
@function toRem($a){
    @return ($a/20)+rem;
} 

vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  runtimeCompiler: true,
  pluginOptions: {
      'style-resources-loader': {
          preProcessor: 'scss',
          patterns: []
      }
  }
})

 

vue组件中

<template>
  <div class="hello">
this is scss
<span class="test">嵌套</span>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '../assets/styles/variables.scss';
$nav-color: #F90;
.hello {
  width: toRem(200);
  height: toRem(200);
  border: 1px solid #000;
  color: $color;
  .test{
    font-size: $font*2;
  }
}
</style>

 

less的使用

安装版本

    "less": "^3.9.0",
    "less-loader": "^5.0.0",

 

样式引入

@color: red;
@font-size: 16px;
@width:100px;
@height:200px;

vue组件

<template>
   <div>
      <p>这是less</p>
      <i>只需要在style节点加上lang="less"属性，即可可直接使用less</i>
   </div>
</template>

<script>
export default {
  name: 'tee',
  data () {
    return {}
  },
  components: {}
}
</script>

<style scoped lang="less">
//@import url('../assets/css/common.less');
div {
  width: @width;
  height: @height+100;
  border: 1px solid #000;
  background: @color;
  p{
    color: yellow
  }
}
</style>