vue-cli3 全局使用 CSS 预处理语言变量

最新推荐文章于 2024-06-18 22:08:44 发布

Luck Young

最新推荐文章于 2024-06-18 22:08:44 发布

阅读量1k

点赞数 1

分类专栏： Vue 前端文章标签： vue js less css

本文链接：https://blog.youkuaiyun.com/Mote123/article/details/103985196

版权

前端同时被 2 个专栏收录

49 篇文章

订阅专栏

Vue

24 篇文章

订阅专栏

本文介绍如何在Vue项目中全局使用CSS预处理语言变量，包括Less、Stylus、Sass和Scss。通过style-resources-loader插件实现，详细步骤包括安装、配置及重启项目，使开发者能在.vue文件或单独样式文件中轻松调用全局变量。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue-cli3全局使用CSS预处理语言变量

这里面包含Less、stylus、sass、scss

我们主要使用一个插件style-resources-loader来实现。

使用vue add style-resources-loader 添加插件的方式，这时控制台会让你选择语言，选择好回车后vue-cli3会在vue.config.js
这个文件中自动给你配置一部分。

module.exports = {
  pluginOptions: {
      'style-resources-loader': {
        preProcessor: 'less',
        patterns: [/* 自己的变量文件路径 */]
      }
  }
}

然后自己加上路径，比如我通常是这样写的

const path = require('path')
module.exports = {
  pluginOptions: {
        'style-resources-loader': {
          preProcessor: 'less',
          patterns: [path.resolve(__dirname, './src/common/style/variable.less')]
        }
    }
}

第二种就是自己安装style-resources-loader这个包，然后在vue.config.js中配置如上就可以了。

配置后记得重启一下项目。然后就可以在对应语言文件中快乐的使用全局变量。

比如在.vue文件中

<style lang="less" scoped>
p.desc {
  color: @text-color-d;
  font-size: 14px;
}
</style>

又或者单独的文件中 eg: base.less

.border {
  border: 1px solid @them-color;
}

对于其他预处理语言也是一样的！