vue项目使用sass、less

一、使用sass

在项目根目录创建vue.config.js，并写入以下内容

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `@import "@/assets/sass/index.scss";`,
      }
    }
  },
}

例如

// index.scss
$red: #FF3B30

在项目中就可以愉快的使用

<style scoped lang="scss">
.wrap {
  color: $red
}
</style>

二、使用less

在项目根目录创建vue.config.js，并写入以下内容

module.exports = {
  css: {
    loaderOptions: {
      less: {
        javascriptEnabled: true,
        globalVars: {
          hack: `true; @import '~@/assets/less/index.less';`
        }
      }
    }
  }
}

例如

// index.less
@red: #FF3B30

在项目中就可以愉快的使用

<style scoped lang="less">
.wrap {
  color: @red
}
</style>