时间戳

首页 > 解决方案 > 点燃元素 | 无法将 scss 加载到 lit-element

webpack - 点燃元素 | 无法将 scss 加载到 lit-element

问题描述

我在 Mac 上，最新的 chrome 使用 webpack 4 和当前的 webpack scss/css 加载器（这是所需的 scss lit-element 加载器等的之前状态......）：

使用：[MiniCssExtractPlugin.loader，“css-loader”，“postcss-loader”，“sass-loader”]

我无法成功地将 scss 加载到我的 lit-element 组件中。

我使用了以下示例并且失败了：

https://github.com/drdreo/lit-scss-loader ,

https://github.com/clicksolutions/lit-element-scss-loader ,

https://blog.webf.zone/on-styling-web-components-b74b8c70c492

以上都失败了。

有没有一种方法可以在这个阶段成功地将 scss 文件加载到 lit-element 组件中，因为内联方式非常混乱，我经常重复自己：

static get styles () {
return css`
.magic-class-name {
    margin: 0;
}
.magic-class-name .magic-class-name2 .magic-class-name3 {
    margin: 0;
}  `
etc...

标签： webpacksasslit-elementlit-html

解决方案

我也遇到了这个问题，并以一种“hacky”的方式找到了解决方法！

我开始做的是直接将我的 scss 作为字符串注入我的 lit-element 并使用 unsafeCSS '解析'它！

您需要安装“to-string-loader”：

yarn add to-string-loader -D
npm install to-string-loader --save-dev

我的 webpack 配置（相关部分）：

{
    test: /\.(s?)css$/,
    use: [
      // to inject the result into the DOM as a style block
      { loader: "to-string-loader" }, 
      {
        loader: "css-loader",
      },
      {
       // to convert SASS to CSS
        loader: "sass-loader",
      },
    ],
  },

另外不要忘记将 scss/css 添加到您的扩展中：

...
extensions: [".ts", ".js", ".scss", "css"],
...

使用此 Webpack 会将您的 SCSS 转换为 CSS，并将其“内容”作为字符串插入任何需要的地方！

在我的课程中，我将以下内容添加到“静态获取样式（）”中：

import {..., unsafeCSS, css } from "lit-element";

class WebComponent extends LitElement {
    static get styles() {
        return css`
          ${unsafeCSS(require("./path/to/your/styles.scss"))}
        `;
    }
}

即使它有点 hacky，我仍然可以在我的 .scss 样式中获得 IDE 的完整智能感知！
而且由于我的 scss 文件中没有“用户输入”，我也不太担心 XSS，即使使用 unsafeCSS()。

可能不是最好的，但这是我现在所做的工作！

祝你好运，我也会关注这个主题以获得更好/改进的答案！

推荐阅读