我正在尝试使用 webpack 将 CSS 代码粘贴到 JS 文件中

我的通量如下

SASS 文件 > CSS 内容 > PostCSS > css 文件

     {
        test: /\.(sass|scss)$/,
        exclude: /node_modules/,
        use: [
          MiniCSSExtractPlugin.loader, 
          'css-loader',
          'postcss-loader',
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true,
              sassOptions: {
                outputStyle: 'compressed'
              }
            }
          }
        ]
      }

但是 MiniCSSExtractPlugin 将内容放入 css 文件中。

我正在使用 Lit Element,因此应按以下方式使用 lit-element 的 css 函数部分声明样式

import {css} from 'lit-element';

export default css`
  :host {
    display: inline;
  }
`;

有没有办法将css代码生成为字符串并将其粘贴到js文件中?

#1楼 票数:0

要将 CSS 文件导入 JS (w/webpack),您需要使用以下加载器配置 webpack:

  • css加载器
  • 样式加载器

两者都可用于 NPM:

$ npm i css-loader style-loader --save-dev

并将此条目添加到 webpack 配置中的 module.rules 数组:

{
  test: /\.css$/,
  use: [
    'style-loader',
    'css-loader'
  ]
}

结果

正确配置的这两个加载器将允许您在 JavaScript 中执行以下语句:

import myStyles from './your-css-file.css';

然后,您可以将它们粘贴到文字模板中,如下所示:

static get styles() {
   return css`${myStyles}`;
}

此外:

深入了解您可能在谈论的内容后,您可能需要查看@cells/cells-cli文件并将这些加载器添加到 webpack 配置中。 否则,您可能需要在每个 lit-element 组件中创建一个webpack.config.js文件,这可能不是当前架构的最佳选择。

很高兴在这里见到你,¡saludos!;)

#2楼 票数:0

@k3llydev,我尝试了您的建议,但无法让它发挥作用。 您有什么建议,特别是当您说“正确配置这两个加载程序都将允许您执行以下操作”时? 我希望能够导入 CSS,然后像您在示例中显示的那样直接在样式 getter 中使用它,但我不得不这样做作为一种解决方法:

import MyImportedStyle from './some.css';

static get styles () {
    return [
        css`${unsafeCSS(MyImportedStyle.toString())}`
    ];
}

在 webpack 中使用 'to-string-loader' 时:

{
    test: /\.css$/i,
    use: ['to-string-loader', 'css-loader'],
}

这对我来说很有效并且做了我想要的,但是如果我可以避免使用 to-string-loader 并且可以直接使用导入的对象,那将是一个主意。 有什么建议么?

这种方式应该满足原始海报的要求,一种将 CSS 作为字符串获取并在您的 LitElement 中使用的方法。

  ask by Aarón Gabriel Hinojosa Maya translate from so

未解决问题?本站智能推荐:

1回复

使用Webpack从SASS导入CSS-url

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

Webpack/React:将样式表中的 css 转换为元素上的内联样式

我创建了一个小型反应应用程序,它使用了许多 sass/css 样式表,这些样式表都导入到 app.scss 中 通常使用 webpack 编译所有内容。 新的需求开始发挥作用,需要将样式内联到元素本身。 当前设置 编译后我想要什么 四处搜索并没有导致任何 webpack 模块能够做到这一点
2回复

为什么webpack不会将组件中的CSS呈现给vendor.css文件?

我用这个模板效果很好。 正如您在屏幕上看到的,所有lybrar(如bootstrap)都将其CSS渲染到vendor.css中,但我的组件直接将其呈现为html,只是在标记中的html文件的标题部分中。 你能告诉我如何配置它吗? 和
1回复

我可以自定义在另一个 web 组件中使用的 web 组件的 css 吗?

我正在使用 javascript 和 lit-element。 我有一个名为“my-list”的 web 组件,它在一些带有文本的 div 中,还有另一个 web 组件(称为“my-table”),这是一个显示具有不同功能的项目列表的表格。 在“my-table”中,我编写了一些 css 和一些函
1回复

如何测试css类属性?

我们(我的团队)正在构建设计系统,该系统由使用发光元素的数字 Web 组件(例如按钮、链接等)组成。 设计系统附带规范定义,该定义记录在我们的文档站点上。 我们想要测试应用在 web 组件上的 CSS 类属性。 我们可以使用window.getComputedStyle()部分测试那些如下:-
1回复

如何使用shadow-dom Web组件实现一致的焦点轮廓颜色?

我正在使用Web组件,大多数是用lit-element和lit-html编写的,他们使用的是Shadow DOM。 某些组件具有按钮和其他具有默认焦点轮廓的交互式部件。 当我构建一个应用程序时,我想设置一个页面范围的规则,将焦点轮廓更改为从页面的背景颜色中清晰突出的颜色。 我
2回复

webpack样式加载器-在React组件上导入不同样式而不覆盖

我有2个React组件,里面需要样式: 产品列表: 产品详情: 它们具有不同的样式,可以相互替代,为简单起见,假定其为body的background-color属性: list.css details.css 实际发生的情况-通过webpack的样式加
1回复

litElement 在静态样式中使用类变量

我需要在我的 litElement 类中计算相同的弹出位置。 然后将其用作样式值。 例如。: 而且我找不到在获取静态样式中使用 this.wrapperTop 的方法。 它是未定义的。 有一些方法可以做到这一点,或者我必须在渲染中只使用 style="" ?