如何在Node.js项目中打包引入CSS-css教程-PHP中文网

webpack 默认不解析 css，必须配置 css-loader 和 style-loader（开发）或 mini-css-extract-plugin（生产），否则 import './style.css' 会报错或样式不生效；css-loader 解析 css 依赖，style-loader 注入 dom，mini-css-extract-plugin 提取独立 css 文件。

如何在node.js项目中打包引入css

Webpack 默认只处理 JavaScript，引入 CSS 必须显式配置 loader 和插件，否则会报错 Module parse failed: Unexpected token 或直接忽略样式文件。

为什么 import './style.css' 不生效

Webpack 本身不理解 CSS 语法，import 语句只是告诉它“这里有个依赖”，但没说明“怎么解析它”。如果不配 css-loader 和 style-loader（或 mini-css-extract-plugin），打包时会跳过 CSS 文件，或者抛出解析错误。

开发环境常用 style-loader：把 CSS 插入 <style></style> 标签动态注入 DOM
生产环境推荐 mini-css-extract-plugin：把 CSS 单独提取为 .css 文件，避免 JS 执行才渲染样式
css-loader 是必装的——它负责解析 @import、url() 等语法，把 CSS 当模块处理

webpack.config.js 中必须加哪些配置

以 Webpack 5 为例，关键配置项不能漏：

在 module.rules 里加一条匹配 /\.css$/ 的规则
use 数组顺序很重要：必须是 ['style-loader', 'css-loader']（开发）或 [MiniCssExtractPlugin.loader, 'css-loader']（生产）
如果用了 mini-css-extract-plugin，必须在 plugins 里实例化它，否则 loader 无法工作
注意 mode: 'production' 下 style-loader 会被自动禁用，不换 loader 就会失效

示例片段：

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  module: {
    rules: [{
      test: /\.css$/,
      use: [
        process.env.NODE_ENV === 'development' 
          ? 'style-loader' 
          : MiniCssExtractPlugin.loader,
        'css-loader'
      ]
    }]
  },
  plugins: [
    ...(process.env.NODE_ENV === 'production' 
      ? [new MiniCssExtractPlugin({ filename: 'styles.[contenthash].css' })] 
      : [])
  ]
};

常见报错和对应修复

遇到这些提示，基本就是 loader 链断了：

Cannot find module 'style-loader' → 没装 npm install --save-dev style-loader
ValidationError: Invalid options object. MiniCssExtractPlugin has been initialized using an options object that does not match the API schema. → 检查 MiniCssExtractPlugin 版本是否匹配 Webpack 版本（Webpack 5 推荐用 v2.7+）
CSS 生效但没热更新 → 开发模式下确认用了 style-loader，且没误配成 MiniCssExtractPlugin.loader
图片或字体路径 404 → css-loader 默认不处理 url()，需加 url-loader 或 file-loader，并配 options.assetsPublicPath

要不要单独分离 CSS 文件

取决于部署方式和性能要求：

单页应用（SPA）且首屏样式简单 → 用 style-loader 合并进 JS，减少请求数
有 CDN、需要缓存控制、或 CSS 体积大 → 必须用 mini-css-extract-plugin 单独输出，配合 [contenthash] 实现精准缓存失效
服务端渲染（SSR）项目 → 不能依赖 style-loader（无 DOM），必须提取 CSS 并由服务端注入 <link> 标签

真正容易被忽略的是：loader 配置必须和 mode、target、甚至 devServer.hot 联动调整，硬套模板配置而不验证运行时行为，十有八九会卡在样式不加载这一步。