Vue项目中Bootstrap自定义样式加载失败（MIME类型错误）

核心问题 #

你遇到的MIME类型错误本质是请求的CSS文件不存在，服务器返回了404的HTML页面（MIME类型为text/html），而非预期的CSS文件。原因是Vue项目中src目录下的文件属于源码，会被Webpack处理，不会直接暴露在服务器的访问路径中，你在public/index.html里直接引用../src/stylesheets/all.css是找不到文件的。

正确的实现步骤 #

1. 移除index.html中的错误样式引用 #

删掉index.html里这行错误代码：

<link rel="stylesheet" type="text/html" href="../src/stylesheets/all.css">

注：样式文件的type属性本来就应该是text/css，改成text/html是错误操作

2. 在Vue项目中导入SCSS文件 #

有两种常用方式：

• 全局导入（推荐）：在src/main.js中直接导入你的all.scss：

  import './stylesheets/all.scss'
  

  Webpack会自动处理SCSS文件，将其编译为CSS并注入到页面中。

• 组件内导入：如果只需要在特定组件中使用，在组件的<style>标签中导入：

  <style lang="scss">
  @import '../stylesheets/all.scss';
  /* 组件自定义样式 */
  </style>
  

3. 确认Bootstrap依赖与SCSS配置 #

确保你已经安装了必要的依赖：

npm install bootstrap sass sass-loader --save-dev

你的all.scss导入写法是正确的，~符号会让Webpack从node_modules目录下查找Bootstrap文件，自定义的_variables.scss也能正确覆盖Bootstrap默认变量。

4. 验证效果 #

重启开发服务器（npm run serve），此时Webpack会编译SCSS文件并自动注入到页面中，不会再出现MIME类型错误，自定义的Bootstrap样式也会生效。

内容的提问来源于stack exchange，提问作者Kaimen