Question

在LitElement中，您可以将样式直接作为内联样式存储在component.ts（或.js）中：

@customElement('main-header')
export class MainHeader extends LitElement {
  static styles = css`
    p {
      background: red;
    }
  `;
}

或在诸如style.ts之类的单独文件中：

\* mainHeaderStyles.ts *\
export default css`
    p {
      background: red;
    }
`;

\* MainHeader.ts *\
import mainHeaderStyles from './main-header.ts';

@customElement('main-header')
export class MainHeader extends LitElement {
  static styles = mainHeaderStyles;

但不在“ .css”中，因此捆绑程序（目前我正在使用Parcel）找不到我的样式并添加浏览器前缀。

我试图使用Webpack（然后汇总）并将“ .css”文件直接导出到组件，捆绑器可以通过这种方式使用autoprefixer，但是它们无法将我的样式与组件的前缀内联（它们只是合并所有样式设置为1个（或多个）输出文件）。

我了解StencilJS，但是我不想重写我所有的LitElement代码。

很高兴听到任何解决方案或有关解决方法的建议。

Answer 1

使用捆扎机

捆绑器[...]只是将所有样式合并到1个（或更多）输出文件中

这实际上取决于您如何配置捆绑程序以及所使用的装载程序/处理器。例如，这是一个简单的Rollup + Postcss + Autoprefixer配置，可以完美地与lit一起使用：

// rollup.config.js
import resolve from 'rollup-plugin-node-resolve';
import typescript from 'rollup-plugin-typescript2';
import postcss from 'rollup-plugin-postcss';
import autoprefixer from 'autoprefixer';

export default {
  // ...
  plugins: [
    resolve(),
    postcss({
      plugins: [autoprefixer()],
      inject: false, // By default postcss also injects the
                     // styles in <head> which is pretty useless
                     // with LitElement's style encapsulation
    }),
    typescript(),
  ],
}

通过这种方式，已处理的css字符串可用作默认导出：

import style from './style.css';

使用Parcel或Webpack + postcss-loader可以轻松完成相同的事情。

采用导入的样式表

捆绑商可以通过这种方式使用自动前缀，但是他们不能将我的样式与组件前缀内联

我猜你的意思是LitElement期望CSSResult属性中的styles s，而不是纯CSS文本。不过，您可以做一些事情来使其工作：

import {css, unsafeCSS, LitElement, customElement} from 'lit-element';
import style from './style.css';

@customElement('my-component')
export class MyComponent extends LitElement {
  // Apply the css template tag to the style variable
  static styles = css([style]);
  // or use unsafeCSS
  static styles = unsafeCSS(style);
  // ...
}

如果您对Rollup + Postcss解决方案感兴趣：我构建了一个Rollup插件（rollup-plugin-postcss-lit），以使Postcss导出的样式适应亮起，因此您不必手动将其转换为{{1 }}

CSSResults

如何将自动前缀与Web组件（litElement）结合使用？

1 个答案:

使用捆扎机

采用导入的样式表