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 相关文章推荐
vue 计算属性和侦听器的使用小结
Jan 25 Vue.js
如何在Vue项目中添加接口监听遮罩
Jan 25 Vue.js
Vue如何实现变量表达式选择器
Feb 18 Vue.js
vue项目实现分页效果
Mar 24 Vue.js
vue+django实现下载文件的示例
Mar 24 Vue.js
Vue vee-validate插件的简单使用
Jun 22 Vue.js
Vue实现tab导航栏并支持左右滑动功能
Jun 28 Vue.js
Vue自定义铃声提示音组件的实现
Jan 22 Vue.js
Vue组件更新数据v-model不生效的解决
Apr 02 Vue.js
vue实现书本翻页动画效果实例详解
Apr 08 Vue.js
vue-cli3.x配置全局的scss的时候报错问题及解决
Apr 30 Vue.js
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
Aug 05 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
中国广播史趣谈 — 几个历史第一次
2021/03/01 无线电
控制打印时页眉角的代码
2007/02/08 Javascript
JavaScript 原型学习总结
2010/10/29 Javascript
推荐30个新鲜出炉的精美 jQuery 效果
2012/03/26 Javascript
javascript学习(一)构建自己的JS库
2013/01/02 Javascript
JS定时器实例
2013/04/17 Javascript
左侧是表头的JS表格控件(自写,网上没有的)
2013/06/04 Javascript
JavaScript中圆括号()和方括号[]的特殊用法疑问解答
2013/08/06 Javascript
基于jquery自定义的漂亮单选按钮RadioButton
2013/11/19 Javascript
ECMAScript5中的对象存取器属性:getter和setter介绍
2014/12/08 Javascript
JS获取图片lowsrc属性的方法
2015/04/01 Javascript
使用HTML+CSS+JS制作简单的网页菜单界面
2015/07/27 Javascript
js 自带的 map() 方法全面了解
2016/08/16 Javascript
node.js中fs.stat与fs.fstat的区别详解
2017/06/01 Javascript
vue中组件的过渡动画及实现代码
2018/11/21 Javascript
jquery实现点击弹出对话框
2020/02/08 jQuery
vue界面发送表情的实现代码
2020/09/11 Javascript
[00:34]拔城逐梦,热血永恒!2020(秋)完美世界城市挑战赛报名开启
2020/10/09 DOTA
Python抓取Discuz!用户名脚本代码
2013/12/30 Python
Python扫描IP段查看指定端口是否开放的方法
2015/06/09 Python
python多线程高级锁condition简单用法示例
2019/11/07 Python
tensorflow之tf.record实现存浮点数数组
2020/02/17 Python
matplotlib之pyplot模块之标题(title()和suptitle())
2021/02/22 Python
localStorage的过期时间设置的方法详解
2018/11/26 HTML / CSS
澳大利亚优质的家居用品和生活方式公司:Bed Bath N’ Table
2019/04/16 全球购物
财务分析个人的自荐书范文
2013/11/24 职场文书
预备党员转正思想汇报
2014/01/12 职场文书
优秀中学生事迹材料
2014/01/31 职场文书
环保专项行动方案
2014/05/12 职场文书
师范生求职信
2014/06/14 职场文书
道路施工安全责任书
2014/07/24 职场文书
学生顶撞老师的检讨书
2014/09/17 职场文书
群众路线表态发言材料
2014/10/17 职场文书
兵马俑导游词
2015/02/02 职场文书
五四青年节活动总结
2015/02/10 职场文书
Python加密与解密模块hashlib与hmac
2022/06/05 Python