vue3 style-resources-loader的安装及使用

vue3 的命令。

vue add style-resources-loader

不知道为什么我用这个命令没有反应。

所以还是用的npm。

npm i style-resources-loader

npm i vue-cli-plugin-style-resources-loader

使用npm的话要安装两个，最后在vue.config.js文件中配置。

const { defineConfig } = require('@vue/cli-service')
const path = require('path')
module.exports = defineConfig({
  transpileDependencies: true,
  // 配置：style-resources-loader
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      // 需要使用path.join来拼接完整的路径,需要文件的绝对路径
      patterns: [
        path.join(__dirname, './src/assets/style/mixins.less'),
        path.join(__dirname, './src/assets/style/variables.less')
      ]
    }
  }
})

less文件放在src/assets/style下面的variables.less。

// variables.less
// less 变量  
//主题
@xtxColor: #27BA9B;
//辅助
@helpColor: #E26237;
//成功
@sucColor: #1DC779;
//警告
@warnColor: #FFB302;
//价格
@priceColor: #CF4444;

然后就可以直接在页面中使用了，不需要通过页面引用了。

<style scoped lang="less">
@import "../../assets/style/variables.less";
.container {
  color: @xtxColor;
}
</style>

<template>
  <div class="container">HomePage</div>
</template>

<script>
export default {
  name: 'HomePage'
}
</script>

<style scoped lang="less">

.container {
  color: @xtxColor;
}
</style>

然后重新运行一下项目就OK了！

npm run serve 或者 npm run dev