Typescript 如何将autoprefixer与web组件（litElement）一起使用？_Typescript_Web Component_Autoprefixer_Lit Element

Typescript 如何将autoprefixer与web组件（litElement）一起使用？

typescript

Typescript 如何将autoprefixer与web组件（litElement）一起使用？,typescript,web-component,autoprefixer,lit-element,Typescript,Web Component,Autoprefixer,Lit Element,在LitElement中，您可以将样式作为内联样式直接存储在组件.ts（或.js）中：或者在单独的文件（如style.ts）中： \* mainHeaderStyles.ts *\ export default css` p { background: red; } `; \* MainHeader.ts *\ import mainHeaderStyles from './main-header.ts'; @customElement('main-header

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

或者在单独的文件（如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，但它们不能将带有前缀的样式内联到组件（它们只是将所有样式合并到一个（或多个）输出文件）

我知道StencilJS，但我不想重写我所有的LitElement代码

将很高兴听到关于如何解决此问题的任何解决方案或建议。）

使用捆绑包绑定器[…]只需将所有样式合并到一个（或多个）输出文件中

这实际上取决于您如何配置捆绑机以及您使用的加载程序/处理器。例如，这是一个简单的Rollup+POSTSS+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(),
  ],
}

同样的事情也可以很容易地用Parcel或Webpack+完成

采用导入的样式表捆绑程序可以用这种方式使用autoprefixer，但它们不能将带有前缀的“我的样式”内联到组件

我猜您的意思是，LitElement希望

styles

属性中的

CSSResult

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+POSTSS解决方案感兴趣：我构建了一个Rollup插件（），将POSTSS导出的样式改编为lit，这样您就不必手动将它们转换为

CSSResults

import {customElement, LitElement, css} from 'lit-element';
import myStyles from './styles.css';
import otherStyles from './other-styles.scss';

@customElement('my-component')
export class MyComponent extends LitElement {
  static styles = [myStyles, otherStyles, css`
    .foo {
      padding: ${...};
    }
  `];
}

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);
  // ...
}

import {customElement, LitElement, css} from 'lit-element';
import myStyles from './styles.css';
import otherStyles from './other-styles.scss';

@customElement('my-component')
export class MyComponent extends LitElement {
  static styles = [myStyles, otherStyles, css`
    .foo {
      padding: ${...};
    }
  `];
}