Webpack不捆绑SCSS / CSS

Question

我正在尝试使用 "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配置。

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'
        })
      ]
}

我的 webpack.config.js 文件

npm start

我的应用程序具有以下结构：

我期望运行scss时看到css在index.html中以{{1}}文件的形式出现。

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

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";