404（未找到）带有 Webpack 的 SCSS答案

【问题标题】：404 (Not Found) SCSS with Webpack404（未找到）带有 Webpack 的 SCSS
【发布时间】：2022-02-15 16:26:11
【问题描述】：

Webpack 抛出错误

GET http://localhost:8080/sass/main.scss net::ERR_ABORTED 404 (Not Found)

但在启动服务器时，它使用 css 加载页面。 scss 导入到 js 中用

import '../sass/main.scss';

webpack 配置：

const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
 entry: './src/js/controller.js',

 plugins: [
  new HtmlWebpackPlugin({
  template: './index.html',
 }),
],
module: {
 rules: [
  {
    test: /\.html$/i,
    use: ['html-loader'],
  },
  {
    test: /\.s[ac]ss$/i,
    use: ['style-loader', 'css-loader', 'sass-loader'],
  },
  ],
 },
}

index.html模板的头部：这里的css链接完全没有影响，只在js里面导入

<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial- 
  scale=1.0" />
 <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 <link
  href="https://fonts.googleapis.com/css? 
  family=Nunito+Sans:400,600,700"
  rel="stylesheet"
 />
 <link rel="shortcut icon" href="/src/img/favicon.png" 
  type="image/x-icon" />
 <link rel="stylesheet" href="/src/saas/main.css" />
 <title></title>
 <script type="module" src="/src/js/controller.js"></script>
</head>

可能出了什么问题？

【问题讨论】：

您的index.html 中是否引用了/sass/main.scss？你能分享index.html文件的代码sn-ps吗？
我在尝试不同的东西（比如编辑路径，添加到 index.html，甚至是 resolve-url-loader

标签： javascript webpack sass

【解决方案1】：

已解决。我删除了 index.html 中脚本的链接

<script type="module" src="src/js/controller.js"></script>

并且错误消失了。（入口点和html模板已经在配置中指定）

【讨论】：