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中使用mockjs代码实例
Nov 25 Vue.js
vue单元格多列合并的实现
Nov 26 Vue.js
vue+element_ui上传文件,并传递额外参数操作
Dec 05 Vue.js
Vue组件简易模拟实现购物车
Dec 21 Vue.js
vue watch监控对象的简单方法示例
Jan 07 Vue.js
vue-quill-editor插入图片路径太长问题解决方法
Jan 08 Vue.js
vue实现防抖的实例代码
Jan 11 Vue.js
Vue看了就会的8个小技巧
Jan 21 Vue.js
vue+echarts实现中国地图流动效果(步骤详解)
Jan 27 Vue.js
vue使用watch监听属性变化
Apr 30 Vue.js
vue postcss-px2rem 自适应布局
May 15 Vue.js
vue router 动态路由清除方式
May 25 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
十天学会php(1)
2006/10/09 PHP
PHP 抓取网页图片并且另存为的实现代码
2010/03/24 PHP
解析thinkphp的左右值无限分类
2013/06/20 PHP
php操作mysqli(示例代码)
2013/10/28 PHP
php 检查电子邮件函数(自写)
2014/01/16 PHP
thinkphp实现面包屑导航(当前位置)例子分享
2014/05/10 PHP
设定php简写功能的方法
2019/11/28 PHP
javascript下判断一个元素是否存在的代码
2010/03/05 Javascript
javascrip关于继承的小例子
2013/05/10 Javascript
JavaScript 动态加载脚本和样式的方法
2015/04/13 Javascript
JS实现简单的键盘打字的效果
2015/04/24 Javascript
ionic实现带字的toggle滑动组件
2016/08/27 Javascript
jquery 正整数数字校验正则表达式
2017/01/10 Javascript
Javascript中document.referrer隐藏来源的方法
2017/01/16 Javascript
防止重复发送 Ajax 请求
2017/02/15 Javascript
Vue作用域插槽slot-scope实例代码
2018/09/05 Javascript
ios设备中angularjs无法改变页面title的解决方法
2018/09/13 Javascript
150行代码带你实现微信小程序中的数据侦听
2019/05/17 Javascript
如何编写一个 Webpack Loader的实现
2020/10/18 Javascript
Python3指定路径寻找符合匹配模式文件
2015/05/22 Python
利用Python实现图书超期提醒
2016/08/02 Python
python中OrderedDict的使用方法详解
2017/05/05 Python
Django自定义认证方式用法示例
2017/06/23 Python
python爬虫_自动获取seebug的poc实例
2017/08/05 Python
selenium+python环境配置教程详解
2019/05/28 Python
django如何实现视图重定向
2019/07/24 Python
用python求一重积分和二重积分的例子
2019/12/06 Python
详解Python 最短匹配模式
2020/07/29 Python
详解torch.Tensor的4种乘法
2020/09/03 Python
购买200个世界上最好的内衣品牌:Bare Necessities
2017/02/11 全球购物
出纳的岗位职责
2013/11/09 职场文书
平民服装店创业计划书
2014/01/17 职场文书
学习张丽丽心得体会
2014/09/03 职场文书
运动会广播稿50字-100字
2014/10/11 职场文书
财务经理岗位职责
2015/01/31 职场文书
Redis入门基础常用操作命令整理
2022/06/01 Redis