0

我正在使用 Web 组件（特别是lit-element），并且我想在几个不同的组件中共享一个通用样式表。我想要实现的是在我的 JS 组件中导入已编译的 CSS 文件时获取它的 url，以便我可以将它作为外部样式表添加到标记中。

组件.js

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

}

所以我希望styleUrl成为已编译 css 的 url。

目前我的 webpack 配置看起来像下面的 Webpack 配置

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

1 回答 1

4

问题是您没有从包中提取样式表：已编译的 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利用新的Constructable Stylesheets API的静态属性，更不用说文档部分不鼓励使用<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,
        ];
    }
}
于 2019-02-16T15:17:59.187 回答