javascript - 使用 Webpack 从 SASS 导入 CSS-url

Question

我正在使用 Web 组件(特别是 lit-element )，并且我想在多个不同的组件之间共享一个通用样式表。我想要实现的目标是在将已编译的 CSS 文件导入到 JS 组件中时获取其 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"
    ]
}

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利用新的属性Constructable Stylesheets API ，更不用说 documentation部分不鼓励使用 <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,
        ];
    }
}