Question

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

组件.scss文件有另一个A.scss文件的@import。那个A.scss文件@import的bootstrap-sass / assets / stylesheet / bootstrap / _variables和@import另一个B.scss。

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

由于

Answer 1

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

你可以继续使用Sass，因为你正在使用它与React，请记住，为了能够使用Sass与StencilJS你必须安装Sass插件并将插件添加到你的PyCharm数组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

我从没有尝试过多次导入，但是我不明白为什么这不起作用。

要使模板与.scss一起使用，您应该按照here

的说明安装此插件。

npm install @stencil/sass --save-dev

然后将此属性添加到config中的stencil.config.ts

plugins: [
    sass()
  ]

Answer 4

是的，它可以处理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/"],
    }),
  ],

};

在上面的示例中，我们告诉Stencil编译器编译sass文件。 includePaths数组告诉编译器应查找的sass文件的目录/文件。

要使用来自nodejs包的@import，您需要做的是： @import "~bootstrap-sass/assets/stylesheet/bootstrap/_variables"; 注意：当不使用相对路径（./style.scss、../../style.scss等）导入时，此处的〜运算符是必需的。

如果要使用相对路径（./b.scss、../b.scss等）导入b.scss文件，则无需在sass插件配置中添加任何其他内容。

我希望能回答您的问题。

Stenciljs和SASS文件

4 个答案: