Webpack 为每次导入生成 css 文件答案

【问题标题】：Webpack generate css file for each importWebpack 为每次导入生成 css 文件
【发布时间】：2020-06-01 20:20:05
【问题描述】：

我正在使用 webpack 和 this 来编译 scss 文件：

{
  test: /\.scss$/i,
  use: [
    // Creates css files
    {
      loader: MiniCssExtractPlugin.loader,
      options: {
        esModule: true,
      },
    },
    "@teamsupercell/typings-for-css-modules-loader",
    // Translates CSS into CommonJS
    {
      loader: 'css-loader',
      options: {
        modules: true
      }
    },
    // Compiles Sass to CSS
    'sass-loader',
  ],
},

这只会生成一个名为 main 的 CSS 文件。我想为源代码中的每个 SCSS 文件生成一个 CSS 文件，以便实现 CSS 的延迟加载。
我需要一种方法来单独生成它们，并在需要时生成 JavaScript 以从服务器下载它们。

现在的插件可以做到这一点吗？

【问题讨论】：

标签： css typescript webpack sass

【解决方案1】：

我想为源代码中的每个 SCSS 文件生成一个 CSS 文件，这样我就可以实现 CSS 的延迟加载。

有了这个要求，你就不需要 webpack。 node-sass 包够你用了。

在package.json 文件中，您可以像这样配置scripts：

{
    "name": "your_project_name",
    "version": "1.0.0",
    "private": true,
    "dependencies": {
        "node-sass": "^4.13.1"
    },
    "scripts": {
        "sass": "node-sass -w scss_folder -o css_folder --output-style compressed"
    }
}

解释：

sass: 这是你的命令名

node-sass、-w、-o、--output-style、compressed：你可以通过上面的链接找到他们的解释。

您的项目结构如下：

Your_project
|
|_ css_folder
|
|_ scss_folder
|
|___ file01.scss
|
|___ file02.scss
|
|_ package.json

在您的项目中，打开命令提示符（或 Mac 上的终端）并输入：

npm run sass

当它准备好收听时，您可以尝试在scss_folder 中创建新的 scss 文件。当你点击ctrl+s（或Mac上的command+s）时，会在css_folder文件夹中生成一个同名的新文件，新文件的扩展名为.css。它也被压缩了。

【讨论】：