diff --git a/README.md b/README.md
index c6cc5182..7595c862 100644
--- a/README.md
+++ b/README.md
@@ -21,8 +21,8 @@ Add in package.json
```bash
yarn add wizard-ui
-# sass dep && loader
-yarn add --dev node-sass style-loader css-loader sass-loader
+# css loader
+yarn add --dev style-loader css-loader
# react bootstrap font dev
yarn add --dev url-loader file-loader
```
@@ -31,11 +31,10 @@ if you not use [create-react-app](https://github.com/facebook/create-react-app),
```js
{
- test: /\.(css|scss)$/,
+ test: /\.css$/,
use: [
'style-loader',
'css-loader',
- 'sass-loader'
]
},
{
@@ -51,7 +50,7 @@ if you not use [create-react-app](https://github.com/facebook/create-react-app),
### Global style
```jsx
-import 'wizard-ui/lib/style/index.scss';
+import 'wizard-ui/lib/style/index.css';
```
### Usage
diff --git a/babel.config.js b/babel.config.js
index b7ba82e3..45eb5530 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -2,7 +2,8 @@ module.exports = api => {
const env = api.env();
console.log('env', env);
const lib = env === 'lib';
- return {
+ const esm = env === 'esm';
+ let result = {
presets: [
'@babel/preset-react',
'@babel/preset-typescript',
@@ -25,17 +26,28 @@ module.exports = api => {
{
removeImport: true,
},
- ],
+ ]
],
ignore: [
'**/*.test.tsx',
'**/types',
'**/interface.tsx',
'**/global.d.ts',
- // '**/setupEnzyme.ts'
],
// minified: true,
// comments: false,
// compact: true,
+ };
+
+ if (lib || esm) {
+ result.plugins.push([
+ 'transform-rename-import',
+ {
+ "original": '^(.+?)\\.scss$',
+ "replacement": '$1.css'
+ }
+ ])
}
+
+ return result;
}
diff --git a/docs/content/get-started/introduction.mdx b/docs/content/get-started/introduction.mdx
index 53223b4e..962b2447 100644
--- a/docs/content/get-started/introduction.mdx
+++ b/docs/content/get-started/introduction.mdx
@@ -9,19 +9,18 @@ Wizard UI 是基于 React 和 Typescript 开发的 UI 组件库。
```bash
# install
yarn add wizard-ui
-# sass dep && loader
-yarn add --dev node-sass style-loader css-loader sass-loader
+# css loader
+yarn add --dev style-loader css-loader
# react bootstrap font dev
yarn add --dev url-loader file-loader
```
需要设置 `webpack config`:
```js
{
- test: /\.(css|scss)$/,
+ test: /\.css$/,
use: [
'style-loader',
'css-loader',
- 'sass-loader'
]
},
{
@@ -47,7 +46,7 @@ ReactDOM.render(
### 全局样式
```jsx
-import 'wizard-ui/lib/style/index.scss';
+import 'wizard-ui/lib/style/index.css';
```
## 单元测试
diff --git a/docs/src/components/TopBar/index.js b/docs/src/components/TopBar/index.js
index 9c432098..5721a2fd 100644
--- a/docs/src/components/TopBar/index.js
+++ b/docs/src/components/TopBar/index.js
@@ -95,6 +95,17 @@ const TopBar = (props) => {
+
+ -
+
+
+
+ )}>
+ Wizard ui pro
+
+
+
-
stats.json",
+ "esm-css": "node-sass src -o esm -q --output-style=compressed --source-map=true",
+ "lib-css": "node-sass src -o lib -q --output-style=compressed --source-map=true",
"tsc-types": "rm -rf types && tsc --declaration -p ./ -t es2015 --emitDeclarationOnly --outDir types",
"copy": "ts-node scripts/build-copy.ts",
"build": "yarn build-dist && yarn build-esm && yarn build-lib && yarn copy && yarn tsc-types",
@@ -83,6 +85,7 @@
"babel-jest": "^24.8.0",
"babel-loader": "8.0.5",
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
+ "babel-plugin-transform-rename-import": "^2.3.0",
"classnames": "^2.2.6",
"css-loader": "^3.1.0",
"enzyme": "^3.10.0",
diff --git a/scripts/build-copy.ts b/scripts/build-copy.ts
index bae339a5..7e1443e8 100644
--- a/scripts/build-copy.ts
+++ b/scripts/build-copy.ts
@@ -1,17 +1,16 @@
import fs from 'fs-extra';
const filterFunc = (src: string, dest:string):boolean => {
- if (src.includes('.tsx')) {
+ if (src.includes('.tsx') || src.includes('.scss')) {
return false
}
return true
}
-fs.copy('src/style', 'esm/style')
fs.copy('src/components', 'esm/components', { filter: filterFunc }, (err: Error) => {
if (err) return console.error(err)
console.log('Copy to ems success!')
})
-fs.copy('src/style', 'lib/style')
+
fs.copy('src/components', 'lib/components', { filter: filterFunc }, (err: Error) => {
if (err) return console.error(err)
console.log('Copy to lib success!')
diff --git a/src/style/bootstrap.scss b/src/style/bootstrap.scss
index 9d040b7c..287a2825 100644
--- a/src/style/bootstrap.scss
+++ b/src/style/bootstrap.scss
@@ -1,2 +1,2 @@
@import 'bootstrap-custom';
-@import '~bootstrap-sass/assets/stylesheets/_bootstrap';
\ No newline at end of file
+@import '../../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap';
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index ade1697d..368da5ef 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2972,6 +2972,11 @@ babel-plugin-transform-remove-undefined@^0.5.0:
dependencies:
babel-helper-evaluate-path "^0.5.0"
+babel-plugin-transform-rename-import@^2.3.0:
+ version "2.3.0"
+ resolved "https://registry.npmjs.org/babel-plugin-transform-rename-import/-/babel-plugin-transform-rename-import-2.3.0.tgz#5d9d645f937b0ca5c26a24b2510a06277b6ffd9b"
+ integrity sha512-dPgJoT57XC0PqSnLgl2FwNvxFrWlspatX2dkk7yjKQj5HHGw071vAcOf+hqW8ClqcBDMvEbm6mevn5yHAD8mlQ==
+
babel-plugin-transform-simplify-comparison-operators@^6.9.4:
version "6.9.4"
resolved "https://registry.npmjs.org/babel-plugin-transform-simplify-comparison-operators/-/babel-plugin-transform-simplify-comparison-operators-6.9.4.tgz#f62afe096cab0e1f68a2d753fdf283888471ceb9"