时间戳

首页 > 解决方案 > StencilJS：编译 scss 并复制到 dist 文件夹

stenciljs - StencilJS：编译 scss 并复制到 dist 文件夹

问题描述

我的目标是在分发包中提供一个 css 文件，如果需要，消费者可以使用它。

为此，我想创建一种全局 scss 文件，但我想避免这种样式附加到每个组件 + 它也不会被组件直接使用。因此，为此我想my-style.scss在文件夹中的某处创建文件/src。

编译这个文件my-style.css并将其复制到dist文件夹的最佳方法是什么？

标签： stenciljs

解决方案

It is possible to specify a global style with Stencil. Simply add the globalStyle property to your stencil.config.js and provide the entry scss file. Your config should look something like this:

const sass = require('@stencil/sass');

exports.config = {
  namespace: 'my-component-lib',
  outputTargets:[
    {
      type: 'dist'
    },
    {
      type: 'www',
      serviceWorker: false
    }
  ],
  globalStyle: 'src/globals/app.scss',
  plugins: [
    sass()
  ]
};

exports.devServer = {
  root: 'www',
  watchGlob: '**/**'
}

The build will successfully compile the scss to dist/my-component-lib.css.

推荐阅读