vue css 相对路径导入问题级踩坑记录


Posted in Vue.js onJune 05, 2022

前提

npm install style-loader --save-dev
npm install css-loader --save-dev
npm install file-loader --save-dev
npm install vue-style-loader — save

利用官方的组件解决css 以及其他静态资源的路径问题

先附上成功的配置

1.build/utils.js

关键的地方在:

vue css 相对路径导入问题级踩坑记录

2.build/webpack.base.conf.js

vue css 相对路径导入问题级踩坑记录

遇到的坑

1.错误写法

vue css 相对路径导入问题级踩坑记录

第一行用的是绝对路径,第二行用的是相对路径。

这样写造成的错误:

Module build failed: Error: Failed to find ‘~@/assets/css/login.css’

经过多次尝试,以及搜索了很久。有说法是style内部不支持~@这种方式的路径指向。

2.正确的写法

vue css 相对路径导入问题级踩坑记录

3.如果想在“style”里面用上~@表示的相对路径

接下来介绍我已经实现的方案:

首先选用Less(http://lesscss.cn/) +postcss (https://www.postcss.com.cn/)。

接下来是具体做法,直接上当前配置。

先安装以下指令:

npm install less less-loader extract-text-webpack-plugin --sava-dev

然后打开工程的/build/ 新建文件 postcss.config.js

module.exports = {
  plugins: {
    'autoprefixer': {
      browsers: 'last 5 version'
    }
  },
  'postcss-import': {
   resolve(id) {
     if (id.charAt(0) == '~') {
       return id.substr(1)
     } else {
       return id
     }
   }
  }
}

修改webpack.base.conf.js 的配置,增加:

// 它会应用到普通的 `.css` 文件
      // 以及 `.vue` 文件中的 `<style>` 块
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: [{
            loader: 'style-loader'
          }, {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
            }
          },
          {
            loader: 'postcss-loader'
          }
        ]
      },
      {
        test: /\.less$/,
        loader: "style-loader!css-loader!less-loader"
      },

修改完之后,重启webpack服务。这里我是用Mac 的终端,在webpack服务窗口使用command + C 就是结束当前运行的服务,再使用npm run dev 重启就可以。

在.vue 文件内的最后使用

<style lang="less" scoped>
  @import "~assets/css/rank.less";
  @import "~assets/css/common.less";
  .contentBox {
    padding: 20px;
  }
</style>

这里要注意加上 ~ , 不然依然无法识别路径。这里暂时还没找到原因,看别人的是可以直接使用。网上教程很多,但是很难找到比较完整的东西,对于自学的娃是伤不起,也没有能一直免费为你解答问题的人。还是自己慢慢摸索,相信大家都能有所成长。

以上为个人经验,希望能给大家一个参考,也希望大家多多支持三水点靠木。 


Tags in this post...

Vue.js 相关文章推荐
vuex Module将 store 分割成模块的操作
Dec 07 Vue.js
vue实现购物车的小练习
Dec 21 Vue.js
vue中父子组件的参数传递和应用示例
Jan 04 Vue.js
vue实现防抖的实例代码
Jan 11 Vue.js
Vue项目打包部署到apache服务器的方法步骤
Feb 01 Vue.js
详解vite+ts快速搭建vue3项目以及介绍相关特性
Feb 25 Vue.js
vue 使用饿了么UI仿写teambition的筛选功能
Mar 01 Vue.js
vue3.0 项目搭建和使用流程
Mar 04 Vue.js
使用vue-element-admin框架从后端动态获取菜单功能的实现
Apr 29 Vue.js
Vue vee-validate插件的简单使用
Jun 22 Vue.js
vue使用echarts实现折线图
Mar 21 Vue.js
vue 把二维或多维数组转一维数组
Apr 24 Vue.js
vue中data里面的数据相互使用方式
Jun 05 #Vue.js
Vue 打包后相对路径的引用问题
Jun 05 #Vue.js
vue实现在data里引入相对路径
Jun 05 #Vue.js
ant design vue的form表单取值方法
Jun 01 #Vue.js
vue ant design 封装弹窗表单的使用
Jun 01 #Vue.js
vue实现登陆页面开发实践
May 30 #Vue.js
vue router 动态路由清除方式
May 25 #Vue.js
You might like
curl不使用文件存取cookie php使用curl获取cookie示例
2014/01/26 PHP
学习php开源项目的源码指南
2014/12/21 PHP
简单谈谈favicon
2015/06/10 PHP
使用Appcan客户端自动更新PHP版本号(全)
2015/07/31 PHP
JavaScript高级程序设计 事件学习笔记
2011/09/10 Javascript
JS自定义功能函数实现动态添加网址参数修改网址参数值
2013/08/02 Javascript
JavaScript中Function详解
2015/02/27 Javascript
Javascript中实现String.startsWith和endsWith方法
2015/06/10 Javascript
jQuery实现checkbox列表的全选、反选功能
2016/11/24 Javascript
JavaScript实现翻页功能(附效果图)
2017/02/16 Javascript
JavaScript基本类型值-Number类型
2017/02/24 Javascript
关于vue.js过渡css类名的理解(推荐)
2017/04/10 Javascript
详解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用
2017/06/16 Javascript
通过fastclick源码分析彻底解决tap“点透”
2017/12/24 Javascript
重新认识vue之事件阻止冒泡的实现
2018/08/02 Javascript
JavaScript基础之静态方法和实例方法分析
2018/12/26 Javascript
JavaScript定时器常见用法实例分析
2019/11/15 Javascript
Angular+Ionic使用queryParams实现跳转页传值的方法
2020/09/05 Javascript
angular *Ngif else用法详解
2020/12/15 Javascript
[04:02]DOTA2上海特锦赛小组赛第二日recap精彩回顾
2016/02/28 DOTA
[00:11]战神迅矛
2019/03/06 DOTA
python共享引用(多个变量引用)示例代码
2013/12/04 Python
Python中的模块和包概念介绍
2015/04/13 Python
Eclipse中Python开发环境搭建简单教程
2016/03/23 Python
Python操作mongodb的9个步骤
2018/06/04 Python
python自定义函数实现最大值的输出方法
2019/07/09 Python
python scrapy爬虫代码及填坑
2019/08/12 Python
python中的selenium安装的步骤(浏览器自动化测试框架)
2020/03/17 Python
瑞典手机壳品牌:Richmond & Finch
2018/04/28 全球购物
施华洛世奇波兰官网:SWAROVSKI波兰
2019/06/18 全球购物
美国狗旅行和户外用品领先供应商:kurgo
2020/08/18 全球购物
办公室内勤岗位职责范本
2013/12/09 职场文书
幼儿园庆六一游园活动方案
2014/01/29 职场文书
尊老爱幼演讲稿
2014/09/04 职场文书
2015年节能降耗工作总结
2015/05/22 职场文书
严以用权学习心得体会
2016/01/12 职场文书