fix: Bundle sass to css

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

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;
 }

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';
 ```
 
 ## 单元测试

docs/src/components/TopBar/index.js

@@ -95,6 +95,17 @@ const TopBar = (props) => {
               </Tooltip>
             </li>
           </ul>
+          <ul className="nav navbar-nav navbar-right">
+            <li>
+              <Tooltip label={(
+                <a target="_blank" rel="noopener noreferrer" href="https://xsky-fe.github.io/wizard-ui-pro/">
+                  <Icon type="grid" />
+                </a>
+              )}>
+                Wizard ui pro
+              </Tooltip>
+            </li>
+          </ul>
           <ul className="nav navbar-nav navbar-right">
             <li>
               <Tooltip label={(

package.json

@@ -1,6 +1,6 @@
 {
   "name": "wizard-ui",
-  "version": "0.4.0",
+  "version": "0.4.0-beta.0",
   "private": false,
   "main": "lib/index.js",
   "module": "esm/index.js",
@@ -25,8 +25,8 @@
   "dependencies": {
     "@types/rc-time-picker": "^3.4.1",
     "@types/rc-tree": "^1.11.3",
-    "@types/react-bootstrap": "^0.32.17",
     "@types/react-addons-css-transition-group": "^15.0.5",
+    "@types/react-bootstrap": "^0.32.17",
     "bootstrap-sass": "^3.4.1",
     "rc-calendar": "^9.15.4",
     "rc-time-picker": "^3.7.1",
@@ -41,10 +41,12 @@
     "test": "jest --env=jsdom",
     "test-dev": "npx majestic",
     "coverage": "jest --env=jsdom --coverage --watchAll=false",
-    "build-esm": "rm -rf esm && NODE_ENV=production babel src --out-dir esm --copy-file --extensions '.ts,.tsx' --env-name 'esm'",
-    "build-lib": "rm -rf lib && NODE_ENV=production babel src --out-dir lib --copy-file --extensions '.ts,.tsx' --env-name 'lib'",
+    "build-esm": "rm -rf esm && NODE_ENV=production babel src --out-dir esm --copy-file --extensions '.ts,.tsx' --env-name 'esm' && yarn esm-css",
+    "build-lib": "rm -rf lib && NODE_ENV=production babel src --out-dir lib --copy-file --extensions '.ts,.tsx' --env-name 'lib' && yarn lib-css",
     "build-dist": "rm -rf dist && NODE_ENV=production webpack",
     "dist-stats": "NODE_ENV=production webpack --profile --json > 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",

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!')

src/style/bootstrap.scss

@@ -1,2 +1,2 @@
 @import 'bootstrap-custom';
-@import '~bootstrap-sass/assets/stylesheets/_bootstrap';
+@import '../../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap';

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"