如何将 css 样式从文件注入到 WebComponent

Question

我想知道是否可以将从文件导入的 .css 样式注入 WebComponent（如果可以，请告诉我如何实现）。我使用 Webpack style-loader 在 .js 文件中加载 .css 样式，但我不知道如何（或者是否可能）将这些样式注入到模板的 WebComponent 中。

I know that I can export styles from .js file declared in template string but it is not a solution which I am looking for.

我创建了一个包含简单示例的存储库，您可以在此处找到它：inject-css-from-file。我还将这些文件包含在此处：

index.html :

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
    <kk-app></kk-app>
</body>
</html>

index.js :

import style from "./index.css";

const template = `
<style>${style}</style>
<div>
    <p>Example component</p>
</div>
`;

export class App extends HTMLElement {
    constructor() {
        super()
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = template;
    }
}
customElements.define('kk-app', App);

index.css :

p {
    color: red;
}

webpack.config.js :

const HTMLWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
    mode: 'production',
    entry: './index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader'],
            },
        ],
    },
    resolve: {
        extensions: ['.js'],
    },
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
    },
    plugins: [
        new HTMLWebpackPlugin({
            template: path.resolve(__dirname, 'index.html'),
            filename: 'index.html',
        }),
    ]
};

Answer 1

因此解决方案是从 webpack.config.js 中删除 style-loader。 .css 文件的规则应如下所示：

rules: [
    {
        test: /\.css$/,
        use: ['css-loader'],
    },
],

我不知道为什么 style-loader 将此 .css 样式更改为一个对象。

P.S. If you are using MiniCssExtractPlugin.loader it will cause same problem

如何将 css 样式从文件注入到 WebComponent

How to inject css styles from file to WebComponent

javascript

css

web-component

webpack