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+vant实现购物车全选和反选功能
Nov 17 Vue.js
vue打开其他项目页面并传入数据详解
Nov 25 Vue.js
全面解析Vue中的$nextTick
Dec 24 Vue.js
vue绑定class的三种方法
Dec 24 Vue.js
vue 动态生成拓扑图的示例
Jan 03 Vue.js
vue-quill-editor插入图片路径太长问题解决方法
Jan 08 Vue.js
详解template标签用法(含vue中的用法总结)
Jan 12 Vue.js
vue 递归组件的简单使用示例
Jan 14 Vue.js
Vue全局事件总线你了解吗
Feb 24 Vue.js
vue中使用mockjs配置和使用方式
Apr 06 Vue.js
vue cli4中mockjs在dev环境和build环境的配置详情
Apr 06 Vue.js
vue动态绑定style样式
Apr 20 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的引用原因分析
2012/09/06 PHP
如何用PHP来实现一个动态Web服务器
2015/07/29 PHP
jQuery 操作下拉列表框实现代码
2010/02/22 Javascript
关于js拖拽上传 [一个拖拽上传修改头像的流程]
2011/07/13 Javascript
浅析js封装和作用域
2013/07/09 Javascript
Javascript 命名空间模式
2013/11/01 Javascript
jquery+ajax验证不通过也提交表单问题处理
2014/12/12 Javascript
浅谈javascript属性onresize
2015/04/20 Javascript
Bootstrap select实现下拉框多选效果
2016/12/23 Javascript
JS实现搜索框文字可删除功能
2016/12/28 Javascript
axios进阶实践之利用最优雅的方式写ajax请求
2017/12/20 Javascript
vue 全选与反选的实现方法(无Bug 新手看过来)
2018/02/09 Javascript
详解Angular操作cookies方法
2018/06/01 Javascript
Vue侦测相关api的实现方法
2019/05/22 Javascript
echarts多条折线图动态分层的实现方法
2019/05/24 Javascript
微信小程序 scroll-view 水平滚动实现过程解析
2019/10/12 Javascript
Python中条件判断语句的简单使用方法
2015/08/21 Python
python构建深度神经网络(续)
2018/03/10 Python
django自带的server 让外网主机访问方法
2018/05/14 Python
python属于跨平台语言码
2020/06/09 Python
Python实例方法、类方法、静态方法区别详解
2020/09/05 Python
Python识别验证码的实现示例
2020/09/30 Python
python 爬虫请求模块requests详解
2020/12/04 Python
pycharm 使用anaconda为默认环境的操作
2021/02/05 Python
美国学校校服,儿童和婴儿服装:Cookie’s Kids
2016/10/14 全球购物
俄罗斯香水在线商店:AromaCode
2019/12/04 全球购物
英国最大的在线照明商店:Litecraft
2020/08/31 全球购物
测试工程师职业规划书
2014/02/06 职场文书
2014年党员发展工作总结
2014/12/02 职场文书
工会工作个人总结
2015/03/03 职场文书
钢琴师观后感
2015/06/12 职场文书
申论不会写怎么办?教您掌握这6点思维和原则
2019/07/17 职场文书
python实现图片批量压缩
2021/04/24 Python
pytorch 权重weight 与 梯度grad 可视化操作
2021/06/05 Python
深入讲解Vue中父子组件通信与事件触发
2022/03/22 Vue.js
python微信智能AI机器人实现多种支付方式
2022/04/12 Python