Webpack5下如何用raw-loader/to-string-loader将CSS转为字符串？

我使用Webpack5，当前配置会将CSS导出为dist/main.css中的单行文件，希望将该CSS转换为字符串用于TSX文件中。尝试两种方法均出错：

• 在TSX中通过内联raw-loader导入：import styleAsString from '!!raw-loader!../dist/main.css';，出现“无法找到模块或其对应类型”错误
• 尝试to-string-loader，在webpack.config.js中编写let output = require('./my.scss');，执行npm run build时出现找不到sass文件的错误

希望获取类似'.puma{color:"black";}.raptors{font-size:12px;}'的CSS字符串，请问哪里操作错了？

webpack.config.js

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

module.exports = {
  entry: {
    theme: "./src/index.ts",
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: "ts-loader",
        exclude: "/node_modules/",
      },
      {
        test: /\.css$/i,
        use: [
          MiniCssExtractPlugin.loader, 

          {
            loader: "css-loader",
            options: {
              import: true,
            },
          },
        ],
      },
      {
        test: /\.scss$/i,
        use: [
          // 'style-loader',
          MiniCssExtractPlugin.loader,
          {
            loader: "css-loader",
            options: {
              import: true,
            },
          },
          {
            loader: "sass-loader",
            options: {
              sourceMap: true,
              implementation: require("sass"),
            },
          },
        ],
      },
      {
        test: /\.(eot|woff|woff2|ttf|otf)$/,
        use: [
          {
            loader: "file-loader",
            options: {
              name: "./fonts/[name].[ext]",
            },
          },
        ],
      },
    ],
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js", ".scss"],
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].js",
    library: {
      name: "[name]",
      type: "umd",
    },
  },
  devtool: "source-map",
  plugins: [
    new CleanWebpackPlugin(),
    new MiniCssExtractPlugin({
      filename: "main.css",
    })
  ],
  optimization: {
    minimizer: [new CssMinimizerPlugin()],
    minimize: true,
  }
};

你的操作错误点 #

1. 直接导入打包后的dist/main.css：dist是Webpack的输出目录，开发阶段该文件还未生成，且raw-loader的作用是处理源码中的样式文件，而非打包产物。另外TypeScript缺少对应模块的类型声明，导致类型错误。
2. 在Webpack配置文件中导入业务文件：webpack.config.js是用来定义打包规则的配置文件，不能直接用require导入业务代码，且你写的路径也未指向源码中的SCSS文件。

正确实现方式 #

方法一：用raw-loader内联导入源码样式（推荐）

1. 安装raw-loader：

npm install raw-loader --save-dev

2. 在TSX中导入源码中的样式文件（不是dist下的产物），用内联loader覆盖默认打包规则：

// 示例路径，根据你项目的目录结构调整
import styleAsString from '!!raw-loader!../styles/main.scss';

3. 解决TypeScript类型错误：在项目根目录创建declarations.d.ts文件，添加类型声明：

declare module '!!raw-loader!*' {
  const content: string;
  export default content;
}

方法二：修改Webpack配置，针对特定样式输出字符串

如果不想每次写内联loader，可以给需要转字符串的样式文件加特殊后缀（比如.raw.scss），然后新增Webpack规则：

module.exports = {
  // ...原有配置
  module: {
    rules: [
      // ...原有规则
      {
        test: /\.raw\.(scss|css)$/i,
        use: [
          'raw-loader',
          'css-loader',
          'sass-loader' // 处理SCSS时需要，纯CSS可移除
        ]
      }
    ]
  }
};

在TSX中导入带后缀的文件：

import styleAsString from '../styles/main.raw.scss';

同样需要添加类型声明到declarations.d.ts：

declare module '*.raw.scss' {
  const content: string;
  export default content;
}

declare module '*.raw.css' {
  const content: string;
  export default content;
}

注意事项 #

如果仍需要生成dist/main.css文件，保留原有MiniCssExtractPlugin的规则即可，新规则与原有规则互不冲突：一个处理普通样式输出到CSS文件，一个处理带.raw后缀的样式输出为字符串。

内容的提问来源于stack exchange，提问作者Judoboy Alex