Блог

Главная - Вопросы по программированию - Как внедрить стили css из файла в веб-компонент

Как внедрить стили css из файла в веб-компонент

#javascript #css #webpack #web-component

#javascript #css #webpack #веб-компонент

Вопрос:

Мне интересно, возможно ли внедрить .css стили, импортированные из файла, в веб-компонент (если да, то, пожалуйста, скажите мне, как я могу этого добиться). Я использовал Webpack style-loader для загрузки .css стилей внутри .js файла, но тогда я не знаю, как (или возможно ли это) внедрить эти стили в веб-компонент шаблона.

Я знаю, что могу экспортировать стили из .js файла, объявленного в строке шаблона, но это не то решение, которое я ищу.

Я создал репозиторий с простым примером, который вы можете найти здесь: 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',
        }),
    ]
};

Ответ №1:

Итак, решением для этого было удалить style-loader из webpack.config.js . Правило для .css файла должно выглядеть так:

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

Я не знаю, почему, но style-loader изменил эти .css стили на объект.

PS Если вы используете MiniCssExtractPlugin.loader это, это вызовет ту же проблему

Комментарии:

1. Спасибо.. Ваш вопрос и ответ спасли мне день!