使用 Webpack 从 SASS 导入 CSS-url

Question

我正在使用 Web 组件（特别是 lit-element），我想在几个不同的组件之间共享一个通用样式表。我想要实现的是在我将编译的 CSS 文件导入我的 JS 组件时获取 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 有更好的样式选项，例如利用新 Constructable Stylesheets API, not to mention that the documentation 的静态 styles 属性部分不鼓励使用 <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,
        ];
    }
}

使用 Webpack 从 SASS 导入 CSS-url

Importing CSS-url from SASS with Webpack

javascript

webpack

webpack-4

lit-element