webpack命令对项目打包报You may need an additional loader to handle the result of these loaders.错误的解决办法

错误内容

ERROR in ./src/lib/vue-toast.vue?vue&type=style&index=0&lang=scss& (./node_modules/[email protected]@vue-loader/lib??vue-loader-options!./src/lib/vue-toast.vue?vue&type=style&index=0&lang=scss&) 9:0
Module parse failed: Unexpected token (9:0)
File was processed with these loaders:
 * ./node_modules/[email protected]@vue-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| 
| 
> .toast-container{
|     position: absolute;
|     left:0;
 @ ./src/lib/vue-toast.vue?vue&type=style&index=0&lang=scss& 1:0-152 1:168-171 1:173-322 1:173-322
 @ ./src/lib/vue-toast.vue
 @ ./src/lib/index.js

错误截图

image.png

解决办法:添加如下这个json,解决如上的报错问题

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

所涉及相关文件如下(若解决了,可不往下看)

vue-toast.vue文件如下





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:'webpackLearn.js'
    },
    module:{
        rules: [
            {
                test:/\.vue$/,
                loader: 'vue-loader',
            },
            {// 添加这个json,解决如上的报错问题
                test: /\.scss$/,
                use: ['style-loader','css-loader', 'sass-loader']
            }, 


        ]
    },
    plugins: [
        new VueLoaderPlugin()

    ]
}

package.json文件

{
  "name": "webpacklearn",
  "version": "1.0.0",
  "description": "Making plug-ins by CoderZB",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "plug-ins"
  ],
  "author": "CoderZB",
  "license": "ISC",
  "dependencies": {
    "babel-core": "^6.26.3",
    "babel-preset-env": "^1.7.0",
    "clone-deep": "^4.0.1",
    "consolidate": "^0.15.1",
    "css-loader": "^3.2.0",
    "merge-source-map": "^1.1.0",
    "node-sass": "^4.12.0",
    "prettier": "^1.18.2",
    "sass-loader": "^8.0.0",
    "scss": "^0.2.4",
    "scss-loader": "^0.0.1",
    "style-loader": "^1.0.0",
    "vue-loader": "^15.7.1",
    "vue-template-compiler": "^2.6.10",
    "vue-template-es2015-compiler": "^1.9.1",
    "webpack": "^4.40.0"
  }
}

你可能感兴趣的:(webpack命令对项目打包报You may need an additional loader to handle the result of these loaders.错误的解决办法)