使用Webpack从SASS导入CSS-url

Question

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

component.js

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

}

所以我希望styleUrl是已编译的CSS的网址。

目前，我的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具有更好的样式选项，例如利用新的Constructable Stylesheets API的static styles属性，更不用说文档部分地阻止了<link>的使用。

有一个webpack插件可以自动准备供LitElement采用的已编译sass： 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,
        ];
    }
}