Webpack 为每次导入生成 css 文件

Posted 2023-03-13

【中文标题】Webpack 为每次导入生成 css 文件

【英文标题】：Webpack generate css file for each import

【发布时间】：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 以从服务器下载它们。

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

【参考方案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。它也被压缩了。