vue:样式文件的自动化导入

问题描述

在用vue写项目的时候,往往会把一些公用的样式和需要混入的mixins的时候,需要单独引入到文件中:

这里以scss为例:

<style scoped lang="scss">
@import '../../assets/styles/***.scss'
...
</style>

每次都需要用@import的方式导入进来,很麻烦。

解决方法

使用vuecli的style-resoures-loader插件来完成自动注入到每个scss文件或者vue组件中style标签中。

步骤

  • 在当前项目目录下:vue add style-resources-loader,来添加一个vuecli插件

这里需要选择你使用的css预处理器。

  • 安装完毕后会在vue.config.js中自动添加配置,如下:
const path = require('path')
module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [
        path.join(__dirname, './src/assets/styles/variables.less'),
        path.join(__dirname, './src/assets/styles/mixins.less')
      ]
    }
  }
}

patterns选项里,加入你需要全局引入的less或者scss文件地址。

然后重启项目就可以在任何组件中使用这些样式了!!!

posted @   前端小白狐  阅读(367)  评论(0编辑  收藏  举报
编辑推荐:
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
阅读排行:
· DeepSeek智能编程
· 精选4款基于.NET开源、功能强大的通讯调试工具
· [翻译] 为什么 Tracebit 用 C# 开发
· 腾讯ima接入deepseek-r1,借用别人脑子用用成真了~
· DeepSeek崛起:程序员“饭碗”被抢,还是职业进化新起点?
点击右上角即可分享
微信分享提示