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

Question

执行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"
  }
}

Answer 1

石震林 2018-12-23 17:38:49

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

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

Answer 2

饕餮3 2018-12-12 20:02:06

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

• 提问者 Ankkaya #1

  还没有解决

• 饕餮3 回复 提问者 Ankkaya #2

  我也卡在这里了，怎么办

• 提问者 Ankkaya 回复 饕餮3 #3

  要不你试试老师说的，把 node_modules 删掉，然后对照着重新安装依赖。：）

点开查看后面7条评论

Answer 3

河畔一角 2018-12-11 10:18:25

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