Stenciljs和SASS文件

Question

我正在尝试将React组件移植到Stenciljs。

对于另一个A.scss文件，组件导入文件有一个@ .scss。该A.scss文件@导入bootstrap-sass/assets/stylesheet/bootstrap/_variables并@导入另一个B.scss。

Stenciljs可以处理吗?或者我需要将所有内容合并到一个文件中？

谢谢

Answer 1

您可以导入其他Sass文件，您不需要将所有内容合并到一个文件中。

你可以继续使用Sass，就像你在React中使用它一样，只要记住，为了能够在StencilJS中使用Sass，你必须安装Sass插件，并将该插件添加到stencil.config.js中的plugins数组中。

有关详细信息，请查看StencilJS网站中的Sass docs。

Answer 2

在您的stencil.config.ts (或stencil.config.js)中：

export const config: Config = {
  plugins: [
    sass({
      includePaths: [path.resolve(__dirname, 'path/to/styles')]
    })
  ]
};

Answer 3

是的，它可以处理sass文件及其导入。

安装模具/sass

npm i @stencil/sass -D

在stencil.config.ts文件中

import { Config } from "@stencil/core";
import { sass } from "@stencil/sass";

export const config: Config = {
  // ... You configuration
  plugins: [
    sass({
      includePaths: ["./node_modules/"],
    }),
  ],

};

在上面的例子中，我们告诉模板编译器编译sass文件。includePaths数组告诉编译器应该在哪些目录/文件中查找sass文件。

为了从nodejs包中使用@import，您只需要：@import "~bootstrap-sass/assets/stylesheet/bootstrap/_variables";注意:如果不使用相对路径(./style.scss，../../style.scss等)导入，这里的~运算符是必需的；

如果您使用相对路径(./b.scss，../b.scss等)导入b.scss文件，则不需要向sass插件配置添加任何其他内容。

我希望这回答了你的问题。