Javascript 网页包未绑定SCS/CSS

我正在尝试使用

SCSS

创建一个用于处理静态站点的网页包配置

 "scripts": {
    "start": "webpack-dev-server --config webpack.dev.js --mode development"
  },
  "devDependencies": {
    "@babel/core": "^7.6.0",
    "@babel/preset-env": "^7.6.0",
    "babel-loader": "^8.0.6",
    "css-loader": "^3.2.0",
    "html-webpack-plugin": "^3.2.0",
    "live-server": "^1.2.1",
    "node-sass": "^4.12.0",
    "sass-loader": "^8.0.0",
    "style-loader": "^1.0.0",
    "webpack": "^4.39.3",
    "webpack-cli": "^3.3.8",
    "webpack-dev-server": "^3.8.0"
  }

我的webpack.config.js文件

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {
        index: './src/index.js'
    },
    devServer: {
        port: 8080
    },
    module: {
      rules: [
        {
          test: /\.css$/i,
          use: ["style-loader", "css-loader"]
        },
        {
          test: /\.s[ac]ss$/i,
          use: ['style-loader', 'css-loader', 'sass-loader']
        },
        {
          test: /\.js$/,
          exclude: /node_modules/,
          loader: 'babel-loader',
          options: {
              presets: ['@babel/preset-env']
          }
      },
      ]
    },
    plugins: [
        new HtmlWebpackPlugin({
          template: './src/index.html',
          inject: true,
          chunks: ['index'],
          filename: 'index.html'
        })
      ]
}

我的应用程序采用以下结构：

当我运行

npm start

时，我希望看到我的

scss

在

index.html

中显示为

css

文件

---

不过，它看起来一点也不起作用。

我发现您的网页配置不正确，因为您使用的是SCS而不是css

下面是我的配置。您可以查看更多

然后像这样导入js文件

import "main.scss";

---

您是否在任何地方导入

main.scss

文件？不，它是一个静态站点，只是

html

和

css

（一旦编译了

scss

）。我希望webpack能够编译

SCS

并捆绑资产。它必须包含在依赖关系图中。

index.js

中的一个选项是导入“/main.scss”，或者可能将其添加为网页包配置中的另一个入口点。我的答案是否解决了您的问题@TimJ？如果是的话，请投赞成票，把我的答案记为接受。非常感谢。

import "main.scss";