[英]How to include scss compilation to css during CRA build
I want to create npm package from my CRA app.我想从我的 CRA 应用程序创建 npm package。 Lets say I have some components where I include.scss file.
假设我有一些包含.scss 文件的组件。 When I build this app, I compile.tsx/ts components to JavaScript files with their definitions.
当我构建这个应用程序时,我将.tsx/ts 组件编译为 JavaScript 文件及其定义。
Compiled folder hierarchy structure may looks like this编译后的文件夹层次结构可能如下所示
components
=> BurgerMenu
=> BurgerMenu.d.ts
=> BurgerMenu.js
=> BurgerMenu.js.map
However compiled JavaScript files imports scss files require("./burgerMenu.scss");
然而编译的 JavaScript 文件导入 scss 文件
require("./burgerMenu.scss");
instead of css file and css file is not compiled into specific folder.而不是 css 文件和 css 文件未编译到特定文件夹中。
Desired result is below期望的结果如下
components
=> BurgerMenu
=> BurgerMenu.d.ts
=> BurgerMenu.js
=> BurgerMenu.js.map
=> BurgerMenu.css
How I can set sass compile during build and in every single component change import from scss to css?如何在构建期间设置 sass 编译以及从 scss 到 css 的每个组件更改导入?
Sample BurgerMenu component示例 BurgerMenu 组件
import * as React from "react";
import "./burgerMenu.scss";
export const BurgerMenu = (props) => {
//removed for brevity
};
package.json 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",
},
}
node-sass
npm package can be used to convert all the.scss files to.css files and the same can be used your modules for importing node-sass
npm package可用于将所有.scss文件转换为.css文件,同样可以用于您的模块导入
Add this in your package.json将此添加到您的 package.json
"scripts" : {
...
"build-css": "node-sass src/scss/ -o dist"
}
Here is a nice explanation of how node-sass
can be used - How to compile or convert sass / scss to css with node-sass (no Ruby)?这是关于如何使用
node-sass
的一个很好的解释 - How to compile or convert sass / scss to css with node-sass (no Ruby)?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.