如何在 CRA 构建期间将 scss 编译包含到 css

Question

我想从我的 CRA 应用程序创建 npm 包。可以说我有一些组件，其中包含 .scss 文件。当我构建此应用程序时，我将 .tsx/ts 组件及其定义编译为 JavaScript 文件。

编译后的文件夹层次结构可能是这样的

components
=> BurgerMenu
    => BurgerMenu.d.ts
    => BurgerMenu.js
    => BurgerMenu.js.map

但是编译的 JavaScript 文件导入 scss 文件 require("./burgerMenu.scss"); 而不是 css 文件并且 css 文件未编译到特定文件夹中。

想要的结果如下

components
=> BurgerMenu
    => BurgerMenu.d.ts
    => BurgerMenu.js
    => BurgerMenu.js.map
    => BurgerMenu.css

如何在构建期间设置 sass 编译以及在每个组件中将导入从 scss 更改为 css？

BurgerMenu 组件示例

import * as React from "react";
import "./burgerMenu.scss";

export const BurgerMenu = (props) => {
  //removed for brevity
};

package.json

{
  "name": "app",
  "version": "0.1.0",
  "private": false,
  "main": "dist/js/index.js",
  "module": "dist/esm/index.js",
  "types": "dist/js/index.d.ts",
  "publishConfig": {
    "access": "public",
    "tag": "prerelease"
    },
  },
"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "build:lib": "yarn build:babel && yarn build:types && node ./scripts/copyTS.js",
    //TODO: node sass compile
    "build:babel": "concurrently \"yarn build:babel:esm && yarn build:babel:umd\" \"yarn build:babel:cjs\"",
    "build:babel:cjs": "cross-env BABEL_ENV=cjs babel --source-maps --extensions \".js,.ts,.tsx\" src --out-dir dist/js --presets=@babel/env",
    "build:babel:esm": "cross-env BABEL_ENV=esm babel --source-maps --extensions \".js,.ts,.tsx\" src --out-dir dist/esm",
    "build:babel:umd": "cross-env BABEL_ENV=umd babel --source-maps --extensions \".js\" dist/esm --out-dir dist/umd --plugins=transform-es2015-modules-umd",
    "build:types": "tsc -p tsconfig.gen-dts.json",
    "clean": "rimraf dist",
    "develop": "yarn build:types && yarn build:babel:esm --skip-initial-build --watch --verbose",
    },  
}

Answer 1

node-sass npm 包可用于将所有 .scss 文件转换为 .css 文件，同样可用于导入模块

将此添加到您的 package.json

"scripts" : {
    ...
    "build-css": "node-sass src/scss/ -o dist"
}

这里很好地解释了如何使用 node-sass -

如何在 CRA 构建期间将 scss 编译包含到 css

How to include scss compilation to css during CRA build

build

sass

reactjs

node-sass

babeljs