Webpack 4:文件加载器不加载.css或.scss文件中的资源

Webpack是一个现代化的静态模块打包工具，它能够将各种资源文件（包括JavaScript、CSS、图片等）打包成一个或多个静态资源文件，以便在浏览器中加载和使用。

在Webpack中，文件加载器（Loader）是用于处理特定类型文件的插件。然而，Webpack默认情况下并不会加载.css或.scss文件中的资源，因为它只关注于JavaScript模块的打包。要解决这个问题，我们可以使用合适的加载器来处理.css或.scss文件中的资源。

对于.css文件，我们可以使用css-loader和style-loader加载器。css-loader负责解析.css文件中的样式代码，而style-loader负责将解析后的样式代码注入到HTML页面中。可以通过以下命令安装这两个加载器：

npm install css-loader style-loader --save-dev

对于.scss文件，我们可以使用sass-loader和node-sass加载器。sass-loader负责将.scss文件编译成CSS代码，而node-sass是sass-loader的依赖模块，用于实际编译.scss文件。可以通过以下命令安装这两个加载器：

npm install sass-loader node-sass --save-dev

安装完成后，我们需要在Webpack的配置文件中进行相应的配置。以下是一个简单的Webpack配置示例：

module.exports = {
  // 入口文件
  entry: './src/index.js',
  // 输出文件
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  },
  // 模块加载器配置
  module: {
    rules: [
      // 处理.css文件
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      // 处理.scss文件
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader']
      }
    ]
  }
};

在上述配置中，我们使用了两个规则来处理.css和.scss文件。当Webpack遇到以.css结尾的文件时，会使用style-loader和css-loader进行处理；当遇到以.scss结尾的文件时，会使用style-loader、css-loader和sass-loader进行处理。

通过以上配置，Webpack就能够正确加载和处理.css和.scss文件中的资源了。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云对象存储（COS）。

• 腾讯云云服务器（CVM）：提供弹性、可靠的云服务器，可满足各种规模和业务需求。详情请参考：腾讯云云服务器
• 腾讯云对象存储（COS）：提供安全、稳定、低成本的对象存储服务，可用于存储和管理各种类型的文件。详情请参考：腾讯云对象存储