javascript - Webpack 没有捆绑 SCSS/CSS

Question

我正在尝试使用 SCSS 创建一个用于处理静态站点的 webpack 配置。

 "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 文件.

虽然它看起来根本没有捡到它。

Answer 1

我看到你的 webpack 配置不正确，因为你使用的是 scss 而不是 css

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

{
    test: /\.scss$/,
    use: [
        'style-loader',
        MiniCssExtractPlugin.loader,
        {
            loader: "css-loader",
            options: {
                minimize: true,
                sourceMap: true
            }
        },
        {
            loader: "sass-loader"
        }
    ]
},

然后像这样导入你的js文件

import "main.scss";