jd-opensource · robinv8 · Dec 26, 2023 · Dec 26, 2023
diff --git a/examples/about-sass-version/README.md b/examples/about-sass-version/README.md
@@ -0,0 +1,25 @@
+# 关于 sass 语法报错问题
+
+SassError: Undefined operation: "calc($col / 12) times 100%".
+
+```
+$width: calc($col / 12) * 100%;
+```
+
+## 报错原因
+由于 taro 底层升级 node sass 导致的
+
+## 解决方案
+
+方案一：降低 sass 版本
+
+在 package.json 中添加如下配置
+```
+"resolutions": {
+    "sass": "1.62.0"
+ },
+```
+
+方案二：升级 taro 相关依赖
+
+在 package.json 中批量替换 taro 相关依赖版本 v3.4.5 及以上版本
diff --git a/examples/about-sass-version/babel.config.js b/examples/about-sass-version/babel.config.js
@@ -0,0 +1,24 @@
+// babel-preset-taro 更多选项和默认值：
+// https://github.com/NervJS/taro/blob/next/packages/babel-preset-taro/README.md
+module.exports = {
+  presets: [
+    [
+      'taro',
+      {
+        framework: 'react',
+        ts: true
+      },
+    ],
+  ],
+  plugins: [
+    [
+      'import',
+      {
+        libraryName: 'taro-hooks',
+        camel2DashComponentName: false
+      },
+      'taro-hooks',
+    ]
+  ],
+
+};
diff --git a/examples/about-sass-version/config/dev.js b/examples/about-sass-version/config/dev.js
@@ -0,0 +1,17 @@
+/*
+ * @Descripttion: your project
+ * @Author: QI
+ * @Date: 2022-02-16 11:50:13
+ * @LastEditors: QI
+ * @LastEditTime: 2022-02-19 15:12:51
+ */
+module.exports = {
+  env: {
+    NODE_ENV: '"development"'
+  },
+  defineConstants: {},
+  mini: {},
+  h5: {
+    esnextModules: ["taro-ui"]
+  }
+};
diff --git a/examples/about-sass-version/config/index.js b/examples/about-sass-version/config/index.js
@@ -0,0 +1,104 @@
+/*
+ * @Descripttion: your project
+ * @Author: QI
+ * @Date: 2022-04-01 09:25:23
+ * @LastEditors: QI
+ * @LastEditTime: 2022-04-01 12:58:27
+ */
+import { resolve } from "path";
+
+const config = {
+  projectName: "taro3-qi-react-cli",
+  date: "2022-2-16",
+  designWidth: 750,
+  deviceRatio: {
+    640: 2.34 / 2,
+    750: 1,
+    828: 1.81 / 2
+  },
+  sourceRoot: "src",
+  outputRoot: "dist",
+  plugins: ['taro-plugin-compiler-optimization'], // 优化打包速度 编译速度·
+  defineConstants: {},
+  copy: {
+    patterns: [],
+    options: {}
+  },
+  framework: "react",
+  mini: {
+    webpackChain(chain, webpack) {
+      if (process.env.NODE_ENV === 'production') {
+        chain.optimization.minimize(true); //使体积优化到最小
+        chain.plugin('analyzer').use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin, []); // 体积地图
+        chain.merge({
+          plugin: {
+            install: {
+              plugin: require('terser-webpack-plugin'),
+              args: [{
+                extractComments: true,
+                test: ['common.js', 'taro.js', 'app.js', 'day.js', 'runtime.js','vendors.js'], //匹配的文件
+                parallel: true,
+                terserOptions: {
+                  compress: true, // 默认使用terser压缩
+                  keep_classnames: true, // 不改变class名称
+                  keep_fnames: true, // 不改变函数名称
+                }
+              }]
+            }
+          }
+        });
+      };
+    },
+    postcss: {
+      pxtransform: {
+        enable: true,
+        config: {}
+      },
+      url: {
+        enable: true,
+        config: {
+          limit: 1024 // 设定转换尺寸上限
+        }
+      },
+      cssModules: {
+        enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
+        config: {
+          namingPattern: "module", // 转换模式，取值为 global/module
+          generateScopedName: "[name]__[local]___[hash:base64:5]"
+        }
+      }
+    }
+  },
+  h5: {
+    esnextModules: ["taro-ui"],
+    publicPath: "/",
+    staticDirectory: "static",
+    postcss: {
+      autoprefixer: {
+        enable: true,
+        config: {}
+      },
+      cssModules: {
+        enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
+        config: {
+          namingPattern: "module", // 转换模式，取值为 global/module
+          generateScopedName: "[name]__[local]___[hash:base64:5]"
+        }
+      }
+    }
+  },
+  alias: {
+    "@": resolve(__dirname, "..", "src"),
+    "@components": resolve(__dirname, "..", "src/components"),
+    "@utils": resolve(__dirname, "..", "src/utils"),
+    "@api": resolve(__dirname, "..", "src/api")
+  },
+
+};
+
+export default function (merge) {
+  if (process.env.NODE_ENV === "development") {
+    return merge({}, config, require("./dev"));
+  }
+  return merge({}, config, require("./prod"));
+}
diff --git a/examples/about-sass-version/config/prod.js b/examples/about-sass-version/config/prod.js
@@ -0,0 +1,38 @@
+module.exports = {
+  env: {
+    NODE_ENV: '"production"',
+  },
+  defineConstants: {},
+  mini: {
+
+  },
+  h5: {
+    /**
+     * WebpackChain 插件配置
+     * @docs https://github.com/neutrinojs/webpack-chain
+     */
+    // webpackChain (chain) {
+    //   /**
+    //    * 如果 h5 端编译后体积过大，可以使用 webpack-bundle-analyzer 插件对打包体积进行分析。
+    //    * @docs https://github.com/webpack-contrib/webpack-bundle-analyzer
+    //    */
+    //   chain.plugin('analyzer')
+    //     .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin, [])
+
+    //   /**
+    //    * 如果 h5 端首屏加载时间过长，可以使用 prerender-spa-plugin 插件预加载首页。
+    //    * @docs https://github.com/chrisvfritz/prerender-spa-plugin
+    //    */
+    //   const path = require('path')
+    //   const Prerender = require('prerender-spa-plugin')
+    //   const staticDir = path.join(__dirname, '..', 'dist')
+    //   chain
+    //     .plugin('prerender')
+    //     .use(new Prerender({
+    //       staticDir,
+    //       routes: [ '/pages/index/index' ],
+    //       postProcess: (context) => ({ ...context, outputPath: path.join(staticDir, 'index.html') })
+    //     }))
+    // }
+  },
+};
diff --git a/examples/about-sass-version/global.d.ts b/examples/about-sass-version/global.d.ts
@@ -0,0 +1,18 @@
+/// <reference types="@tarojs/taro" />
+
+declare module '*.png';
+declare module '*.gif';
+declare module '*.jpg';
+declare module '*.jpeg';
+declare module '*.svg';
+declare module '*.css';
+declare module '*.less';
+declare module '*.scss';
+declare module '*.sass';
+declare module '*.styl';
+
+declare namespace NodeJS {
+  interface ProcessEnv {
+    TARO_ENV: 'weapp' | 'swan' | 'alipay' | 'h5' | 'rn' | 'tt' | 'quickapp' | 'qq' | 'jd'
+  }
+}
diff --git a/examples/about-sass-version/package.json b/examples/about-sass-version/package.json
@@ -0,0 +1,84 @@
+{
+  "name": "taro3-qi-react-cli",
+  "version": "1.0.0",
+  "private": true,
+  "description": "taro3创建的react版本脚手架",
+  "templateInfo": {
+    "name": "taro-hooks",
+    "typescript": true,
+    "css": "sass"
+  },
+  "scripts": {
+    "build:weapp": "taro build --type weapp",
+    "build:swan": "taro build --type swan",
+    "build:alipay": "taro build --type alipay",
+    "build:tt": "taro build --type tt",
+    "build:h5": "taro build --type h5",
+    "build:rn": "taro build --type rn",
+    "build:qq": "taro build --type qq",
+    "build:jd": "taro build --type jd",
+    "build:quickapp": "taro build --type quickapp",
+    "dev:weapp": "npm run build:weapp -- --watch",
+    "dev:swan": "npm run build:swan -- --watch",
+    "dev:alipay": "npm run build:alipay -- --watch",
+    "dev:tt": "npm run build:tt -- --watch",
+    "dev:h5": "npm run build:h5 -- --watch",
+    "dev:rn": "npm run build:rn -- --watch",
+    "dev:qq": "npm run build:qq -- --watch",
+    "dev:jd": "npm run build:jd -- --watch",
+    "dev:quickapp": "npm run build:quickapp -- --watch",
+    "pull": "git pull origin master",
+    "dev:weappPreview": "taro build --type weapp --watch --env production"
+  },
+  "browserslist": [
+    "last 3 versions",
+    "Android >= 4.1",
+    "ios >= 8"
+  ],
+  "author": "",
+  "dependencies": {
+    "@babel/runtime": "^7.7.7",
+    "@tarojs/cli": "3.4.5",
+    "@tarojs/components": "3.4.5",
+    "@tarojs/plugin-framework-react": "3.4.5",
+    "@tarojs/react": "3.4.5",
+    "@tarojs/runtime": "3.4.5",
+    "@tarojs/taro": "3.4.5",
+    "dayjs": "^1.10.7",
+    "md5": "^2.3.0",
+    "mobx": "^4.8.0",
+    "mobx-react": "^6.1.4",
+    "rc-codebox": "^1.4.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "taro-hooks": "latest",
+    "taro-ui": "^3.2.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.8.0",
+    "@tarojs/mini-runner": "3.4.5",
+    "@tarojs/plugin-terser": "^2.2.10",
+    "@tarojs/webpack-runner": "3.4.5",
+    "@types/react": "^17.0.2",
+    "@types/webpack-env": "^1.13.6",
+    "@typescript-eslint/eslint-plugin": "^4.15.1",
+    "@typescript-eslint/parser": "^4.15.1",
+    "babel-plugin-import": "^1.13.3",
+    "babel-preset-taro": "3.4.5",
+    "cache-loader": "^4.1.0",
+    "eslint": "^6.8.0",
+    "eslint-config-taro": "3.4.5",
+    "eslint-plugin-import": "^2.12.0",
+    "eslint-plugin-react": "^7.8.2",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "stylelint": "9.3.0",
+    "taro-plugin-compiler-optimization": "^1.0.1",
+    "terser-webpack-plugin": "^3.0.5",
+    "thread-loader": "^3.0.4",
+    "typescript": "^4.2.3",
+    "webpack-bundle-analyzer": "^4.5.0"
+  },
+  "engines": {
+    "node": ">=12.0.0"
+  }
+}
diff --git a/examples/about-sass-version/project.config.json b/examples/about-sass-version/project.config.json
@@ -0,0 +1,60 @@
+{
+  "miniprogramRoot": "dist/",
+  "projectname": "塔塔管家",
+  "description": "项目配置文件，详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
+  "appid": "wx7a42c5ab005bd5c8",
+  "setting": {
+    "urlCheck": false,
+    "es6": false,
+    "enhance": false,
+    "postcss": false,
+    "preloadBackgroundData": false,
+    "minified": true,
+    "newFeature": true,
+    "coverView": true,
+    "nodeModules": false,
+    "autoAudits": false,
+    "showShadowRootInWxmlPanel": false,
+    "scopeDataCheck": false,
+    "uglifyFileName": false,
+    "checkInvalidKey": true,
+    "checkSiteMap": true,
+    "uploadWithSourceMap": true,
+    "compileHotReLoad": false,
+    "lazyloadPlaceholderEnable": false,
+    "useMultiFrameRuntime": true,
+    "useApiHook": true,
+    "useApiHostProcess": true,
+    "babelSetting": {
+      "ignore": [],
+      "disablePlugins": [],
+      "outputPath": ""
+    },
+    "enableEngineNative": false,
+    "useIsolateContext": true,
+    "userConfirmedBundleSwitch": false,
+    "packNpmManually": false,
+    "packNpmRelationList": [],
+    "minifyWXSS": true,
+    "disableUseStrict": false,
+    "minifyWXML": true,
+    "showES6CompileOption": false,
+    "useCompilerPlugins": false,
+    "ignoreUploadUnusedFiles": true,
+    "useStaticServer": true
+  },
+  "compileType": "miniprogram",
+  "simulatorType": "wechat",
+  "simulatorPluginLibVersion": {},
+  "condition": {},
+  "libVersion": "2.22.0",
+  "srcMiniprogramRoot": "dist/",
+  "packOptions": {
+    "ignore": [],
+    "include": []
+  },
+  "editorSetting": {
+    "tabIndent": "insertSpaces",
+    "tabSize": 2
+  }
+}
diff --git a/examples/about-sass-version/project.tt.json b/examples/about-sass-version/project.tt.json
@@ -0,0 +1,13 @@
+{
+  "miniprogramRoot": "./",
+  "projectname": "tt-project",
+  "description": "taro3创建的塔塔管家",
+  "appid": "touristappid",
+  "setting": {
+    "urlCheck": true,
+    "es6": false,
+    "postcss": false,
+    "minified": false
+  },
+  "compileType": "miniprogram"
+}