如何在lit-html/LitElement中使用Sass？无需外部CSS与Webpack适配PWA Starter Kit

嘿，完全可以做到！不用切换到Webpack，也不用依赖外部CSS文件，就能在PWA Starter Kit里给LitElement组件用上Sass。下面分两种实用方案，适配不同场景：

方案一：运行时编译（快速上手，适合开发阶段） #

这种方式不需要修改构建配置，直接在组件内编译Sass代码，非常适合快速测试：

1. 安装Sass编译器
   首先给项目添加dart-sass依赖（现在官方推荐用这个替代node-sass）：

   npm install sass --save-dev
   

2. 在组件内编写并编译Sass
   直接在LitElement组件的styles静态getter里编写Sass代码，用sass.compileString()编译成CSS后传给Lit的css()函数：

   import { LitElement, html, css } from 'lit-element';
   import sass from 'sass';
   
   class MySassComponent extends LitElement {
     static get styles() {
       // 这里写你的Sass代码，支持变量、嵌套等特性
       const sassCode = `
         $accent: #ff4081;
         :host {
           display: block;
           padding: 20px;
           background: $accent;
           color: white;
         }
         .btn {
           padding: 8px 16px;
           border: none;
           border-radius: 4px;
           background: white;
           color: $accent;
           &:hover {
             opacity: 0.9;
           }
         }
       `;
       // 编译Sass为纯CSS字符串
       const compiledCss = sass.compileString(sassCode).css;
       // 返回LitElement可识别的CSS模板
       return css([compiledCss]);
     }
   
     render() {
       return html`
         <h2>Sass 样式测试</h2>
         <button class="btn">Hover 我看看</button>
       `;
     }
   }
   
   customElements.define('my-sass-component', MySassComponent);
   

方案二：构建时编译（性能更优，适合生产环境） #

如果要在生产环境使用，推荐用构建时编译的方式，避免运行时的编译开销。PWA Starter Kit默认用Rollup，我们可以用Rollup插件在构建阶段把Sass编译成CSS字符串：

1. 安装Rollup Sass插件

   npm install rollup-plugin-sass --save-dev
   

2. 修改Rollup配置
   在项目根目录的rollup.config.js中添加这个插件，配置不生成外部CSS文件：

   import sass from 'rollup-plugin-sass';
   
   export default {
     // ... 其他原有配置
     plugins: [
       // ... 其他原有插件（比如node-resolve、commonjs等）
       sass({
         output: false, // 禁止生成外部CSS文件
         insert: false, // 不自动插入到DOM中
       }),
     ],
   };
   

3. 单独编写Sass文件并导入
   创建一个.scss文件（比如my-component.scss），编写你的Sass样式：

   $primary: #2196f3;
   :host {
     display: block;
     max-width: 600px;
     margin: 0 auto;
     padding: 16px;
     border: 1px solid $primary;
   }
   .title {
     color: $primary;
     font-size: 1.5rem;
     &::after {
       content: '';
       display: block;
       width: 50px;
       height: 2px;
       background: $primary;
       margin-top: 8px;
     }
   }
   

   然后在组件文件中导入这个Sass文件，直接把编译后的CSS字符串传给css()：

   import { LitElement, html, css } from 'lit-element';
   // 导入Sass文件，Rollup会自动编译成CSS字符串
   import componentStyles from './my-component.scss';
   
   class MyOptimizedComponent extends LitElement {
     static get styles() {
       return css([componentStyles]);
     }
   
     render() {
       return html`
         <h3 class="title">构建时编译的Sass样式</h3>
         <p>生产环境性能更优！</p>
       `;
     }
   }
   
   customElements.define('my-optimized-component', MyOptimizedComponent);
   

注意事项 #

• 两种方案都不需要依赖Webpack，完全基于PWA Starter Kit默认的Rollup工具链
• 方案一的运行时编译虽然简单，但每次组件加载都会编译Sass，生产环境建议用方案二
• 如果需要共享Sass变量/混合宏，可以把它们抽成单独的.scss文件，在组件的Sass代码中用@import引入（两种方案都支持）

内容的提问来源于stack exchange，提问作者Swift