課程
/前端開發
/前端工具
/Vue+Webpack打造todo應用
不知道為啥?還是報這個錯誤，不會webpack版本的問題把，設置了使用?vue-loader不起作用
2018-06-02
源自：Vue+Webpack打造todo應用 2-1
正在回答
還要注意stylus的正則是 test: /\.styl(us)?$/
style標簽上寫的是 lang="stylus"哦
lss說的對了
首先最新的webpack使用vue-loader時還要在配置中添加 Vue Loader 的插件。
//?webpack.config.jsconst?VueLoaderPlugin?=?require('vue-loader/lib/plugin')module.exports?=?{ ??module:?{ ????rules:?[ ??????//?...?其它規則 ??????{ ????????test:?/\.vue$/, ????????loader:?'vue-loader' ??????} ????] ??}, ??plugins:?[ ????//?請確保引入這個插件！ ????new?VueLoaderPlugin() ??]}
然后如果添加了插件還是報錯如下錯誤的話，表示不能處理.vue文件里<style>的部分，還要添加vue-style-loader來處理
最終的webpack.config.js如下：
參考：https://vue-loader.vuejs.org/zh/guide/#%E6%89%8B%E5%8A%A8%E9%85%8D%E7%BD%AE
[object Object]
Dandelion_H2o
//vue-loader@15.*之后除了必須帶有VueLoaderPlugin?之外，還需另外單獨配置css-loader。 const?path?=?require("path"); const?VueLoaderPlugin?=?require('vue-loader/lib/plugin'); module.exports?=?{?? ????entry:path.join(__dirname,"js/index.js"), ????module:{???? ????????rules:[{?????? ????????????test:/\.vue$/,?????? ????????????loader:"vue-loader"???? ????????},{?????? ????????????test:/\.css$/,?????? ????????????loader:"style-loader!css-loader"???? ????????}] ????},?? ????plugins:?[???? ????????new?VueLoaderPlugin()?? ????],?? ????output:{???? ????????filename:"bundle.js",???? ????????path:path.join(__dirname,"dist")?? ????} }
//vue-loader@15.*之后除了必須帶有VueLoaderPlugin 之外，還需另外單獨配置css-loader。
const path = require("path");
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
? entry:path.join(__dirname,"js/index.js"),
? module:{
? ? rules:[{
? ? ? test:/\.vue$/,
? ? ? loader:"vue-loader"
? ? },{
? ? ? test:/\.css$/,
? ? ? loader:"style-loader!css-loader"
? ? }]
? },
? plugins: [
? ? new VueLoaderPlugin()
? ],
? output:{
? ? filename:"bundle.js",
? ? path:path.join(__dirname,"dist")
? }
}
#vue-loader@15.*之后除了必須帶有VueLoaderPlugin?之外，還需另外單獨配置css-loader。
裝了“css-loader”，也正確配置了“VueLoaderPlugin”，但無法解析“app.vue”內“style”標簽里的樣式文本，該如何解決？
主要報錯內容如下：
ERROR?in?./src/app.vue?vue&type=style&index=0&id=bced26ea&scoped=true&lang=css?(./node_modules/vue-loader/lib??vue-loader-options!./src/app.vue?vue&type=style&index=0&id=bced26ea&scoped=true&lang=css)?16:0 Module?parse?failed:?Unexpected?character?'#'?(16:0) You?may?need?an?appropriate?loader?to?handle?this?file?type. | | >?#test?{ |?????color:?red; |?}
刪除“app.vue”的“style”內容后，運行 `npm run build `也確實不再報錯了。
我的依賴包如下：
"dependencies":?{???? ????"css-loader":?"^0.28.11", ????"vue":?"^2.5.16", ????"vue-loader":?"^15.2.4", ????"vue-template-compiler":?"^2.5.16", ????"webpack":?"^4.12.0", ????"webpack-cli":?"^3.0.8" }
所以這該如何解決呢？
Taro_Sun
慕粉2355383041
R5Blocks
幕布斯5273701 回復 慕粉2355383041
我寫了，但是沒用啊，還是報錯
謝謝木汀，我也遇到這個問題，并按照你的方式解決了問題
舉報
用前端最熱門框架Vue+最火打包工具Webpack打造todo應用
3 回答為什么添加了vue-loader還存在這個問題
2 回答vue-loader不起作用
1 回答stylus和stylus-loader加載錯誤
9 回答vue-loader不起效果，已經添加過new VueLoaderPlugin()了
1 回答styl樣式文件問題：vue重復加載
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2018-12-18
還要注意stylus的正則是 test: /\.styl(us)?$/
style標簽上寫的是 lang="stylus"哦
2018-08-22
lss說的對了
首先最新的webpack使用vue-loader時還要在配置中添加 Vue Loader 的插件。
//?webpack.config.jsconst?VueLoaderPlugin?=?require('vue-loader/lib/plugin')module.exports?=?{ ??module:?{ ????rules:?[ ??????//?...?其它規則 ??????{ ????????test:?/\.vue$/, ????????loader:?'vue-loader' ??????} ????] ??}, ??plugins:?[ ????//?請確保引入這個插件！ ????new?VueLoaderPlugin() ??]}然后如果添加了插件還是報錯如下錯誤的話，表示不能處理.vue文件里<style>的部分，還要添加vue-style-loader來處理
最終的webpack.config.js如下：
參考：https://vue-loader.vuejs.org/zh/guide/#%E6%89%8B%E5%8A%A8%E9%85%8D%E7%BD%AE
2018-08-22
lss說的對了
首先最新的webpack使用vue-loader時還要在配置中添加 Vue Loader 的插件。
//?webpack.config.jsconst?VueLoaderPlugin?=?require('vue-loader/lib/plugin')module.exports?=?{ ??module:?{ ????rules:?[ ??????//?...?其它規則 ??????{ ????????test:?/\.vue$/, ????????loader:?'vue-loader' ??????} ????] ??}, ??plugins:?[ ????//?請確保引入這個插件！ ????new?VueLoaderPlugin() ??]}然后如果添加了插件還是報錯如下錯誤的話，表示不能處理.vue文件里<style>的部分，還要添加vue-style-loader來處理
最終的webpack.config.js如下：
參考：https://vue-loader.vuejs.org/zh/guide/#%E6%89%8B%E5%8A%A8%E9%85%8D%E7%BD%AE
2018-08-03
2018-07-31
//vue-loader@15.*之后除了必須帶有VueLoaderPlugin?之外，還需另外單獨配置css-loader。 const?path?=?require("path"); const?VueLoaderPlugin?=?require('vue-loader/lib/plugin'); module.exports?=?{?? ????entry:path.join(__dirname,"js/index.js"), ????module:{???? ????????rules:[{?????? ????????????test:/\.vue$/,?????? ????????????loader:"vue-loader"???? ????????},{?????? ????????????test:/\.css$/,?????? ????????????loader:"style-loader!css-loader"???? ????????}] ????},?? ????plugins:?[???? ????????new?VueLoaderPlugin()?? ????],?? ????output:{???? ????????filename:"bundle.js",???? ????????path:path.join(__dirname,"dist")?? ????} }2018-07-31
//vue-loader@15.*之后除了必須帶有VueLoaderPlugin 之外，還需另外單獨配置css-loader。
const path = require("path");
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
? entry:path.join(__dirname,"js/index.js"),
? module:{
? ? rules:[{
? ? ? test:/\.vue$/,
? ? ? loader:"vue-loader"
? ? },{
? ? ? test:/\.css$/,
? ? ? loader:"style-loader!css-loader"
? ? }]
? },
? plugins: [
? ? new VueLoaderPlugin()
? ],
? output:{
? ? filename:"bundle.js",
? ? path:path.join(__dirname,"dist")
? }
}
2018-07-31
#vue-loader@15.*之后除了必須帶有VueLoaderPlugin?之外，還需另外單獨配置css-loader。
const path = require("path");
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
? entry:path.join(__dirname,"js/index.js"),
? module:{
? ? rules:[{
? ? ? test:/\.vue$/,
? ? ? loader:"vue-loader"
? ? },{
? ? ? test:/\.css$/,
? ? ? loader:"style-loader!css-loader"
? ? }]
? },
? plugins: [
? ? new VueLoaderPlugin()
? ],
? output:{
? ? filename:"bundle.js",
? ? path:path.join(__dirname,"dist")
? }
}
2018-06-17
裝了“css-loader”，也正確配置了“VueLoaderPlugin”，但無法解析“app.vue”內“style”標簽里的樣式文本，該如何解決？
主要報錯內容如下：
ERROR?in?./src/app.vue?vue&type=style&index=0&id=bced26ea&scoped=true&lang=css?(./node_modules/vue-loader/lib??vue-loader-options!./src/app.vue?vue&type=style&index=0&id=bced26ea&scoped=true&lang=css)?16:0 Module?parse?failed:?Unexpected?character?'#'?(16:0) You?may?need?an?appropriate?loader?to?handle?this?file?type. | | >?#test?{ |?????color:?red; |?}我的依賴包如下：
"dependencies":?{???? ????"css-loader":?"^0.28.11", ????"vue":?"^2.5.16", ????"vue-loader":?"^15.2.4", ????"vue-template-compiler":?"^2.5.16", ????"webpack":?"^4.12.0", ????"webpack-cli":?"^3.0.8" }所以這該如何解決呢？
2018-06-14
我寫了，但是沒用啊，還是報錯
2018-06-11
謝謝木汀，我也遇到這個問題，并按照你的方式解決了問題