是什么原因導致無法使用Webpack將SCSS編譯為CSS？

我正在開發一個需要在不同檔案中編譯 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 檔案。

問題：

1. 組態檔中缺少什么？
2. 如何確保生成的 CSS 被縮小？

uj5u.com熱心網友回復：

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 捆綁包./dist/js/main.js和 css 捆綁包放入，./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 縮小，您需要通過 或 安裝css -minimizer-webpack-plugin（您可以使用任何其他縮小插件，但我將僅展示使用它的示例）。并將其包含到您的檔案中，如下所示：npm install --save-dev css-minimizer-webpack-pluginyarn add -D css-minimizer-webpack-pluginwebpack.config.js

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

為了確保你的 css 被縮小，你只需要運行 webpack build 并在 dist 目錄中檢出捆綁的 css 檔案。如果它在法律注釋之后沒有不必要的空格或換行，則意味著您的 css 被縮小了；）

標籤：javascript css 网页包 粗鲁的

上一篇：如何將Capacitorjs與Node.js集成？

下一篇：Webpack不適用于Typescript別名