使用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的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,
        ];
    }
}