javascript - 安装引导程序后，我的本地 css 模块不再加载到 webpack 中

Question

我是 webpack 和 vue.js 的新手，并且使用 vue webpack 模板做得很好......直到我尝试安装并需要引导程序以及我自己的 styles.css 文件。

最初，我添加了

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

到我的 webpack.base.config 文件，然后在我的 /src 文件夹中创建一个 /styles 子文件夹来保存我的 styles.css 文件。将 import './styles/styles.css' 添加到我的 main.js 文件中，保存，瞧！它正在工作。

我需要添加引导程序，所以我使用了npm install bootstrap和npm install jquery popper.js. 然后我将require ('bootstrap') 添加到我的 main.js 中......突然间，我收到了错误

This relative module was not found:

* ./style/mainstyle.css in ./src/main.js

即使删除 bootstrap require，它仍然会抛出相同的错误。我什至尝试删除并重新创建我的 /styles/styles.css 文件夹结构...... nada。

在网上搜索帮助不大之后，我决定继续卸载 bootstrap、jquery 和 popper.js。不幸的是，这仍然没有帮助。

我一生都无法弄清楚出了什么问题，或者如何解决它。我应该废弃它并重新开始吗？

编辑：自从问题发生以来，我已经重新启动了我的开发服务器，以防万一。

更新：尝试更改相对路径，但得到相同的错误。改回来了......现在我得到了这个：

 WAIT  Compiling...                                                     11:39:41

 94% asset optimization                                                       i    
 ERROR  Failed to compile with 1 errors                                 11:39:41

This relative module was not found:

* ./mainstyle.css in ./src/main.js


 WAIT  Compiling...                                                     11:39:51

 94% asset optimization                                                       l    
 ERROR  Failed to compile with 1 errors                                 11:39:51

 error  in ./src/styles/mainstyle.css

Module build failed: Unknown word (5:1)

  3 | // load the styles
  4 | var content = require("!!../../node_modules/css-loader/index.js??ref--7-1!../../node_modules/postcss-loader/lib/index.js??ref--7-2!./mainstyle.css");
> 5 | if(typeof content === 'string') content = [[module.id, content, '']];
    | ^
  6 | if(content.locals) module.exports = content.locals;
  7 | // add the styles to the DOM
  8 | var update = require("!../../node_modules/vue-style-loader/lib/addStylesClient.js")("62b80dbc", content, false, {});


 @ ./src/styles/mainstyle.css 2:14-232 21:1-42:3 22:19-237
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

我会坦率地承认我并不真正理解它告诉我的内容，但我知道我没有更改该文件。

标签： javascriptcsswebpackvue.jsmodule