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

Question

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

component.js

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

}

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

В настоящее время мой конфиг webpack выглядит примерно так

...
{
    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 есть лучшие варианты стилей, такие как статический styles свойство, которое использует преимущества нового API-интерфейса Constructable Stylesheets, не говоря уже о том, что документация частично препятствует использованию <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,
        ];
    }
}