1. 程式人生 > >vue-cli搭建的專案引入.css檔案報錯

vue-cli搭建的專案引入.css檔案報錯

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: []為空,都行。。。
希望哪位大神看到解釋下,問題解決了,但沒找到原理。謝謝!!