使用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中引入的基础组件样式也出现问题
求答惑,非常感谢!