webpack后报错,You may need an appropriate loader to handle this file type

来源:16-4 webpack打包功能实现(上)

Ankkaya

2018-12-01

执行webpack后报错,
You may need an appropriate loader to handle this file type
图片描述

看起来像是找不到合适的 loader 加载 css

webpack.config.js
var path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
    entry: './src/lib/index.js',
    output: {
        path: path.join(__dirname, './dist'),
        filename: 'vue-toast-demo.js'
    },
    module: {
        rules:[
            {
                test:/\.vue$/,
                exclude:/node_modules/,
                loader: 'vue-loader',
                include:path.join(__dirname, 'src'),
                options:{
                    loaders:{
                        scss:'style-loader!css-loader!postcss-loader!sass-loader'
                    },
                    extractCSS: true
                }
            },
            {
                test:/\.js$/,
                loader:'babel-loader',
                include:path.join(__dirname,'src'),
                exclude:/node_modules/
            }
        ]
    },
    plugins:[
        new VueLoaderPlugin("index.css")
    ]
}
package.json
{
  "name": "vue-toast-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "ankkaya",
  "license": "ISC",
  "dependencies": {
    "css-loader": "^1.0.1",
    "postcss-loader": "^3.0.0",
    "style-loader": "^0.23.1",
    "vue-loader": "^15.4.2",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.5.17",
    "webpack": "^4.26.1"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "node-sass": "^4.10.0",
    "sass-loader": "^7.1.0",
    "webpack-cli": "^3.1.2"
  }
}

写回答

3回答

石震林

2018-12-23

                {
                	test:/\.scss$/,
                	use:[
                		'style-loader',
                		'css-loader',
                		'sass-loader'
                	]
                }

删除options的内容,在下面添加 rules里面添加  上述代码。问题解决。什么问题不知道。


1
0

饕餮3

2018-12-12

你解决了吗,我遇到了跟你一样的问题 css webpack编译不了

0
10
饕餮3
回复
Ankkaya
我解决了,加我扣扣525169470
2018-12-14
共10条回复

河畔一角

2018-12-11

检查package.json和课程中的对比,是否有缺东西,然后删除node_modules从新安装依赖。

0
0

Vue2.6+Node.js+MongoDB 全栈打造商城系统

课程全面升级,Vue2.6+Koa2,从前端入门全栈,让你的未来更宽广

2634 学习 · 924 问题

查看课程