如何使用webpack的raw-loader/ to-string-loader将css转换为string？

wz8daaqr 于 2023-08-06 发布在 Webpack

关注(0)|答案(1)|浏览(127)

我使用的是webpack 5，通过下面的webpack配置，我得到了一个导出到dist/main.css的liner css。我想采取的css，然后将其转换为字符串使用他们在我的tsx文件。所以我找到了两种方法。一种方法是使用raw-loader使用内联加载器，所以我在tsx文件import styleAsString from '!!raw-loader!../dist/main.css';中这样编码，但我得到“无法找到模块或其相应的类型错误”。然后我发现了这个加载器https://www.npmjs.com/package/to-string-loader，它看起来很容易使用。所以在webpack.config.js中，我输入let output = require('./my.scss');，然后运行npm run build，但是我得到了构建错误，说找不到我的sass文件。我是webpack的新手，我不确定我需要做什么来获得css作为字符串。所以像这样的'.puma{color:"black";}.raptors{font-size:12px;}'我做错了什么？

webpack.config.js

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,
  }
};

字符串

webpack

来源：https://stackoverflow.com/questions/75620622/how-to-use-webpacks-raw-loader-to-string-loader-to-convert-css-to-string

1条答案

按热度按时间

bfnvny8b1#

从替换内联加载程序语法
现在建议删除所有内联加载器语法，并使用resourceQuery条件来模拟内联语法的功能。
并使用asset/source
asset/source：导出资产的源代码。以前可通过使用raw-loader实现。
my.css：

.puma {
    color: 'black';
}
.raptors {
    font-size: 12px;
}

字符串
index.js：

import mycss from './my.css?raw';

console.log(mycss, typeof mycss);

型
webpack.config.js：

module.exports = {
    mode: 'production',
    entry: './src/index.js',
    output: {
        clean: true,
    },
    module: {
        rules: [
            {
                resourceQuery: /raw/,
                type: 'asset/source',
            },
        ],
    },
};

型
建置记录档：

> webpack

asset main.js 114 bytes [emitted] [minimized] (name: main)
orphan modules 70 bytes [orphan] 1 module
./src/index.js + 1 modules 139 bytes [built] [code generated]
webpack 5.88.2 compiled successfully in 147 ms

型
产出
dist/index.js：

(() => {
    'use strict';
    console.log(".puma {\n\tcolor: 'black';\n}\n.raptors {\n\tfont-size: 12px;\n}\n", 'string');
})();

型

赞(0）回复(0）举报 2023-08-06

我来回答

如何使用webpack的raw-loader/ to-string-loader将css转换为string？

1条答案

相关问题

热门标签

最新问答