vue-cli搭建的项目引入.css文件报错
程序员文章站
2022-06-06 20:26:26
...
Module build failed: ParseError: E:\Demo\vuedemo\myvuedemo\node_modules\swiper\dist\css\swiper.css:4:96
1| // style-loader: Adds some css to the DOM by adding a <style> tag
2|
3| // load the styles
4| var content = require("!!../../../css-loader/index.js?{\"minimize\":false,\"sourceMap\":false}!./swiper.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
expected "indent", got "!"
at Parser.error (E:\Demo\vuedemo\myvuedemo\node_modules\stylus\lib\parser.js:259:11)
at Parser.expect (E:\Demo\vuedemo\myvuedemo\node_modules\stylus\lib\parser.js:287:12)
at Parser.block (E:\Demo\vuedemo\myvuedemo\node_modules\stylus\lib\parser.js:845:12)
at Parser.selector (E:\Demo\vuedemo\myvuedemo\node_modules\stylus\lib\parser.js:1555:24)
at Parser.ident (E:\Demo\vuedemo\myvuedemo\node_modules\stylus\lib\parser.js:1446:25)
at Parser.stmt (E:\Demo\vuedemo\myvuedemo\node_modules\stylus\lib\parser.js:778:26)
at Parser.statement (E:\Demo\vuedemo\myvuedemo\node_modules\stylus\lib\parser.js:685:21)
at Parser.parse (E:\Demo\vuedemo\myvuedemo\node_modules\stylus\lib\parser.js:236:25)
at Renderer.render (E:\Demo\vuedemo\myvuedemo\node_modules\stylus\lib\renderer.js:80:22)
at E:\Demo\vuedemo\myvuedemo\node_modules\stylus-loader\index.js:165:12
at tryCatchReject (E:\Demo\vuedemo\myvuedemo\node_modules\when\lib\makePromise.js:840:30)
at runContinuation1 (E:\Demo\vuedemo\myvuedemo\node_modules\when\lib\makePromise.js:799:4)
at Fulfilled.when (E:\Demo\vuedemo\myvuedemo\node_modules\when\lib\makePromise.js:590:4)
at Pending.run (E:\Demo\vuedemo\myvuedemo\node_modules\when\lib\makePromise.js:481:13)
at Scheduler._drain (E:\Demo\vuedemo\myvuedemo\node_modules\when\lib\Scheduler.js:62:19)
at Scheduler.drain (E:\Demo\vuedemo\myvuedemo\node_modules\when\lib\Scheduler.js:27:9)
@ ./~/swiper/dist/css/swiper.css 4:14-174 18:2-22:4 19:20-180
@ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-awesome-swiper/swiper.vue
@ ./~/vue-awesome-swiper/swiper.vue
@ ./~/vue-awesome-swiper/index.js
@ ./src/main.js
@ multi ./build/dev-client ./src/main.js
我是引入swiper插件的时候报的错,找了好多资料没查到原因。最后有人让看看webpack.base.conf.js文件下的 {
test:/\.css$/,
loader:'style-loader!css-loader!stylus-loader'
//下面没include:属性
}
在下面添上
include: [
/src/,
。。。。
]
可以了
include:是代表我们解析的文件只包含那些东西
include: [] 这里用一个数组来包括的要解析的文件夹路径
{
test:/\.css$/,
loader:'style-loader!css-loader!stylus-loader',
include: [
/src/,//在src目录下的css需要编译
'/node_modules/swiper/dist/css'//增加swiper目录
]
}
神奇的在下面 {
test:/\.css$/,
loader:'style-loader!css-loader!stylus-loader',
include: []
}
哪怕include: []为空,都行。。。
希望哪位大神看到解释下,问题解决了,但没找到原理。谢谢!!
推荐阅读
-
用Vue-cli搭建的项目中引入css报错的原因分析
-
Vue项目中引入外部文件的方法(css、js、less)
-
bootstrap+jquery项目引入文件报错的解决方法
-
浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法
-
vue-cli搭建项目引入jquery和jquery-weui的步骤教程
-
vue-cli搭建的项目引入.css文件报错
-
用Vue-cli搭建的项目中引入css报错的原因分析
-
bootstrap+jquery项目引入文件报错的解决方法
-
浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法
-
Vue项目中引入外部文件的方法(css、js、less)