webpack4 配置遇到的问题,需要额外的loaders

Question

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.js

const 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"
  }
}

Answer 1

hi~,我也遇到类似的问题，请问解决了么?

Answer 2

把你的这个文件./app/src/views/home/home.vue源码，粘贴出来看看；是不是你的style，写错了？ 如果你使用sass，你的组件中 style的写法如下：<style lang="sass"></style>