组件引用多个css样式,安装业务组件导致基础组件css样式文件引入失败

使用vue-cli搭建完项目根据vant文档我继续在根目录中执行

npm i vant -S

安装成功我在我的main.js文件中完整引入组件

import Vue from 'vue'

import App from './App'

import router from './router'

import ZanUI from 'vant'

import 'vant/lib/vant-css/index.css';

Vue.use(ZanUI)

然后在页面中注册并使用基础组件,到这里都没有问题,我想使用业务组件,在使用GoodsList 商品列表组件过程中,我根据文档继续安装

npm i captain-goods-list -S

安装成功后,我在页面引入并注册组件

import GoodsList from 'captain-goods-list';

export default{

components: {

'cap-goods-list':GoodsList

}

}

接着我继续根据文档引入该组件的css文件,我是在.vue文件中style标签内引入,尝试过在js中import 'captain-goods-list';引入无果

@import 'captain-goods-list';

这里报错,Can't resolve './captain-goods-list.less' in 'C:\web\paintingStore\paintingStore\painting\src\pages' in C:\web\paintingStore\paintingStore\painting\src\pages\index.vue (line 197, column 4)我猜测可能是webpack配置问题,但是当我注释掉这个css文件引入时,开始在main.js文件中引入的基础组件css也报错了,

Module build failed: Unknown word (5:1)

3 | // load the styles

4 | var content = require("!!../../../.0.28.4@css-loader/index.js?{\"minimize\":false,\"sourceMap\":false}!./index.css");

> 5 | if(typeof content === 'string') content = [[module.id, content, '']];

| ^

6 | if(content.locals) module.exports = content.locals;

7 | // add the styles to the DOM

8 | var update = require("!../../../.3.0.1@vue-style-loader/lib/addStylesClient.js")("140cd8f9", content, false);

@ ./~/.0.6.6@vant/lib/vant-css/index.css 4:14-172 18:2-22:4 19:20-178

@ ./src/main.js

@ multi ./build/dev-client ./src/main.js

当我注释掉所有有关这个GoodsList 业务组件再重新执行

npm i vant -S

错误才消失,我又继续尝试安装其他业务组件也导致这个问题,当我安装好业务组件再启动项目基础组件的css引入便会失败,知道我注释掉所有的业务组件代码重新安装基础组件错误才会消失。这里我不对于css文件引入不知道是否是webpack有关css-loader配置问题,我主要有两个问题:

1.业务组件css样式该如何引入项目

2.为什么在我安装业务组件并引入样式文件后,在全局main.js中引入的基础组件样式也出现问题

求答惑,非常感谢!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,我理解了你的问题。首先,我需要确认一下你所说的“组件”是指什么。如果你是指前端框架中的组件,那么这个问题的回答可能会因为你使用的框架而有所不同。但是,如果你只是指 HTML 中的元素,那么我可以给你一个通用的回答。 首先,让我们来看看如何在 HTML 中应用 CSS 样式。你可以在 HTML 的 head 标签中使用 style 标签,如下所示: ```html <!DOCTYPE html> <html> <head> <title>My Page</title> <style> /* CSS 样式代码 */ body { background-color: #f1f1f1; } h1 { color: blue; } </style> </head> <body> <h1>Hello World!</h1> <p>This is my page.</p> </body> </html> ``` 在上面的例子中,我们在 style 标签中定义了两个 CSS 样式规则:一个用于设置页面背景颜色,另一个用于设置页面标题的颜色。这些规则将应用于整个页面。 接下来,让我们来看看如何引入静态资源。在 HTML 中,你可以使用 link 标签来引入外部样式表和其他资源,如下所示: ```html <!DOCTYPE html> <html> <head> <title>My Page</title> <link rel="stylesheet" href="mystyles.css"> </head> <body> <h1>Hello World!</h1> <p>This is my page.</p> </body> </html> ``` 在上面的例子中,我们使用 link 标签将一个名为 mystyles.css 的外部样式引入了我们的页面中。这个样式表可以包含任意数量的 CSS 样式规则,并且可以在多个页面中重复使用。 希望这个回答能够帮到你,如果你有任何其他问题,请随时提出。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值