webpack-dev-server 之后一直出现下面的报错，就是css样式解析不出来，也不清楚下载什么loaders,有没有人遇到类似情况的，怎么处理的ERROR in ./app/src/views/home/home.vue?vue&type=style&index=0&lang=css& (./node_modules/_vue-loader@15.7.2@vue-loader/lib??vue-loader-options!./app/src/views/home/home.vue?vue&type=style&i
ndex=0&lang=css&) 14:0
Module parse failed: Unexpected token (14:0)
File was processed with these loaders:
* ./node_modules/_vue-loader@15.7.2@vue-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|
|
> .home{
| font-size: 140px;
| }
@ ./app/src/views/home/home.vue?vue&type=style&index=0&lang=css& 1:0-152 1:168-171 1:173-322 1:173-322
@ ./app/src/views/home/home.vue
@ ./app/src/router/index.js
@ ./app/src/main.js
@ multi ./app/src/main.js我的配置如下webpack.config.jsconst path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
// 入口
// entry: () => './app/src/main.js',
entry: {
app: ['./app/src/main.js']
},
// 引入loaders， 什么样的文件需要什么样的解析器，这就是loader的作用
module: {
rules: [{
test: /\.html$/,
use: 'html-loader'
}, {
test: /\.vue$/,
use: 'vue-loader'
},{
test: /\.sass$/,
// loader: 'style-loader!css-loader!sass-loader',
//loader 的解析从后向前解析
use: [ 'vue-style-loader', 'css-loader', 'sass-loader' ]
}]
},
// 插件
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: "./app/public/index.html"
}),
new CleanWebpackPlugin(),
new VueLoaderPlugin
],
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js' // 用 webpack 1 时需用 'vue/dist/vue.common.js'
}
},
// 输出
output: {
filename: '[name].min.js',
path: path.resolve(__dirname, 'dist') // 当前目录下的dist文件
}
};package.js{
"name": "xw-jingdong",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^3.2.0",
"file-loader": "^5.0.2",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"node-sass": "^4.13.0",
"sass": "^1.23.7",
"sass-loader": "^8.0.0",
"style-loader": "^1.0.0",
"vue": "^2.6.10",
"vue-loader": "^15.7.2",
"vue-router": "^3.1.3",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.6.10",
"webpack": "^4.36.0",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.9.0"
}
}
2 回答
一缕孤烟
TA贡献10条经验 获得超1个赞
把你的这个文件
./app/src/views/home/home.vue
源码，粘贴出来看看；
是不是你的style，写错了？ 如果你使用sass，你的组件中 style的写法如下：
<style lang="sass"></style>
添加回答
举报
0/150
提交
取消