是什么导致使用 Webpack 将 SCSS 编译为 CSS 失败？

Question

我正在开发一个项目，需要将 CSS 和 JavaScript 代码编译到不同的文件中。

我有一个 JavaScript 源文件 - <root>/src/js/main.js - 按预期编译成 <root>/dist/main.js。

webpack 配置文件如下所示：

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
var path = require("path");

module.exports = {
mode: 'development',
entry: "./src/js/main.js",
output: {
    path: path.resolve(__dirname, "dist/js"),
    filename: '[name].js',
    publicPath: "/dist"
 },
  watch:true,
  module: {
    rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env'],
            },
          },
        },
        {
          test: /\.s?css$/,
          use: [
            MiniCssExtractPlugin.loader,
            "css-loader",
            "sass-loader"
          ]
      }
    ]
  },
  plugins: [
      new MiniCssExtractPlugin({
        filename: "[name].css",
        chunkFilename: "[id].css"
      })
  ]
}

在 <root>/src/scss/ 中，我有一个包含各种导入的 app.scss 文件：

// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');

// Bootstrap 4
@import '~bootstrap/scss/bootstrap';

// Layout
@import './layout';

目录和文件树：

package.json 文件：

{
  "name": "myproject",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/preset-env": "^7.16.11",
    "mini-css-extract-plugin": "^2.6.0",
    "node-sass": "^7.0.1",
    "sass": "^1.50.0",
    "sass-loader": "^12.6.0",
    "webpack": "^5.72.0",
    "webpack-cli": "^4.9.2"
  },
  "dependencies": {
    "@babel/core": "^7.17.9",
    "babel-loader": "^8.2.4",
    "bootstrap": "^4.6.0",
    "css-loader": "^6.7.1",
    "jquery": "^3.6.0",
    "popper.js": "^1.16.1",
    "style-loader": "^3.3.1"
  }
}

问题：

我需要将 SCSS 编译成 <root>/dist/css/app.css，但 webpack.config.js 文件中肯定缺少某些内容，因为没有 CSS文件生成。

问题：

配置文件中缺少什么？
如何确保生成的 CSS 被缩小？

Answer 1

css捆绑

基本上您的 css 没有捆绑，因为 webpack 被配置为仅构建 ./src/js/main.js 文件和从该单一入口点导入的所有其他文件。

要制作 webpack 包 css 文件，您可以从已处理的 js 文件中导入它，或者将其作为附加 entryPoint 包含到 webpack.config.js:

选项 1. 添加导入

只需在 src/js/main.js 文件中添加以下行

import "../scss/app.scss";

选项 2. 在 webpack 配置中指定入口点

删除当前入口点行

entry: "./src/js/main.js",

并添加指定多个入口点的新入口点行

entry: ["./src/js/main.js", "./src/scss/app.scss"],

输出文件结构

在你的问题中你提到你想把 js bundle 放到 ./dist/js/main.js 和 css bundle 到 ./dist/css/app.css 但是 webpack 不是很灵活，有多个入口点输出路径。所以最好将您的 webpack 配置输出字段更新为以下一个：

output: {
  path: path.resolve(__dirname, "dist"),
  filename: "[name].js",
  publicPath: "/dist",
},

这将生成类似 ./dist/main.js 和 ./dist/main.css 的平面捆绑块文件结构。

css 缩小

要启用 css 缩小，您需要通过 npm install --save-dev css-minimizer-webpack-plugin 或 [=24 安装 css-minimizer-webpack-plugin（您可以使用任何其他缩小插件，但我将仅展示使用它的示例） =].并将其包含到您的 webpack.config.js 文件中，如下所示：

const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
...
module.exports = {
...
  optimization: {
    minimizer: [new CssMinimizerPlugin()],
  },
  plugins: [
    ...,
    new CssMinimizerPlugin(),
  ],
...
}

为了确保你的 css 被压缩，你只需要运行 webpack 构建并检出 dist 目录中捆绑的 css 文件。如果它在法律注释后没有不必要的空格或换行，这意味着你 css 被缩小了 ;)

是什么导致使用 Webpack 将 SCSS 编译为 CSS 失败？

What causes this failure to compile SCSS to CSS with Webpack?

javascript

css

sass

webpack