Импорт CSS-URL из SASS с помощью Webpack

Question

Я работаю с веб-компонентами (в частности, lit-element ) и хочу поделиться общей таблицей стилей для нескольких различных компонентов.Я пытаюсь добиться получения URL скомпилированного файла CSS, когда я импортирую его в свой JS-компонент, чтобы я мог добавить его в качестве внешней таблицы стилей в разметке.

компонента.js

import styleUrl from 'url-loader!../styles/placeholder.scss';
...
render(){
    return html`
        <link rel="stylesheet" href="${styleUrl}">
        ...
    `

}

Поэтому я хочу, чтобы styleUrl был URL для скомпилированного css.

В настоящее время моя конфигурация webpack выглядит примерно так: Webpack config

...
{
    test: /\.scss$/,
    use: [
        "style-loader",
        "css-loader", 
        "sass-loader"
    ]
}

Answer 1

Проблема в том, что вы не извлекаете таблицы стилей из комплекта: скомпилированный sass добавляется в комплект, поэтому он недоступен в виде отдельных файлов, каждый из которых имеет свой URL.

так что вы можете использовать такие инструменты, как extract-loader :

import stylesheetUrl from "file-loader!extract-loader!css-loader!main.css";
// stylesheetUrl will now be the hashed url to the final stylesheet

Однако у LitElement есть лучшие варианты стилей, такие как свойство static styles, которое использует преимущества новой ConstructableAPI стилей , не говоря уже о том, что документация частично препятствует использованию <link>.

. Существует плагин webpack, который автоматически подготавливает скомпилированный sass для принятия LitElement: lit-scss-loader .

import style1 from './style-1.scss';
import style2 from './style-2.css';

class LitSassLoaderTest extends LitElement {

    // TypeScript
    static styles = [
        style1,
        style2,
    ];

    // JavaScript
    static get styles() {
        return [
            style1,
            style2,
        ];
    }
}