折腾:
【部分解决】ReactJS中react-mobile-datepicker中input被设置readonly时无法滚动选择日期
期间,去把
lanjingling0510/react-mobile-datepicker: ? ? look a demo, Please imitate mobile environment.
源码放到preact项目中后,css出错了:
css代码:
:root { --default-bg: #f7f7f7; --default-color: color(var(--default-bg) contrast(50%)); --default-disabled-color: color(var(--default-color) blend(var(--default-bg) 70%)); --default-theme: #4eccc4;
webpack打包时,出错:
ERROR in ./~/css-loader?{"modules":true,"sourceMap":true,"importLoaders":1}!./~/postcss-loader/lib?{"sourceMap":true}!./~/less-loader/dist?{"sourceMap":true}!./src/components/react-mobile-datepicker/index.css Module build failed: --default-bg: #f7f7f7; --default-color: color(var(--default-bg) contrast(50%)); ^ Error evaluating function `color`: keyword.toLowerCase is not a function in /Users/crifan/dev/xxxxxxxx/src/components/react-mobile-datepicker/index.css (line 3, column 21) @ ./src/components/react-mobile-datepicker/index.css 4:14-208 18:2-22:4 19:20-214 @ ./src/components/react-mobile-datepicker/index.js @ ./src/components/date-selector/index.js @ ./src/container/breeding/breeding-process/index.js @ ./src/container/app.js @ ./src/index.js @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server babel-polyfill ./index.js
Error evaluating function `color`: keyword.toLowerCase is not a function
Error evaluating function `darken`: undefined is not a function – sage – Roots Discourse
javascript – .toLowerCase not working, replacement function? – Stack Overflow
看了下源码中,好像很多color相关的库:
- color
- color-convert
- color-string
- supports-color
- color-name
- colormin
- css-color-names
- colors
等等
估计就是用于支持上述写法的。
去搜搜这些库:
npm color-convert
npm color-string
npm supports-color
npm color
好像是的
又看到一堆的:
"postcss-color-function": "1.3.2", "postcss-color-gray": "2.0.0", "postcss-color-hex-alpha": "1.3.0", "postcss-color-hwb": "1.2.0", "postcss-color-rebeccapurple": "1.2.0", "postcss-color-rgba-fallback": "1.3.1",
果然就是这个:
支持这种写法:
body { background: color(red a(90%)) }
所以,先要去安装这个
然后搞清楚如何放到项目里生效
看到原项目中是:
cssnext的requires包括:
“postcss-color-function”: “1.3.2”,
postcss-cssnext的requires是:
“postcss-color-function”: “4.0.0”,
所以还是要先搞清楚:
cssnext 和 postcss-cssnext
cssnext – Use tomorrow’s CSS syntax, today.
-》
:root { --mainColor: red; } a { color: var(--mainColor); }
MoOx/postcss-cssnext: PostCSS plugin to use tomorrow’s CSS syntax, today.
其项目中用到了:
var cssnext = require(‘cssnext’);
和:
require("postcss-url")(), require("postcss-cssnext")(), require("postcss-mixins"), require("postcss-nested")(),
以及:
react-mobile-datepicker/package.json devDependencies: "cssnext": "^1.8.4", "postcss-cssnext": "^3.0.2",
好像是应该放入到:
/webpack.config.babel.js
use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: [{ loader: 'css-loader', options: { modules: true, sourceMap: CSS_MAPS, importLoaders: 1 } }, { loader: `postcss-loader`, options: { sourceMap: CSS_MAPS, plugins: () => { autoprefixer({ browsers: ['last 2 versions'] }); } } }, { loader: 'less-loader', options: { sourceMap: CSS_MAPS } } ] }) }, { test: /\.(less|css)$/, exclude: [ path.resolve(__dirname, 'src/components'), path.resolve(__dirname, 'src/container') ], use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: [{ loader: 'css-loader', options: { sourceMap: CSS_MAPS, importLoaders: 1 } }, { loader: `postcss-loader`, options: { sourceMap: CSS_MAPS, plugins: () => { autoprefixer({ browsers: ['last 2 versions'] }); } } }, { loader: 'less-loader', options: { sourceMap: CSS_MAPS } } ] }) }, |
中某个合适的位置?
找些合适的例子
webpack.config.babel.js postcss-loader postcss-cssnext
postcss/postcss-loader: PostCSS loader for webpack
Doesn’t work with webpack 2 · Issue #92 · postcss/postcss-loader
webpack 2 + PostCSS + cssnext – Thinking in Code
use: ExtractTextPlugin.extract({ use: [{ loader: 'css-loader', options: { importLoaders: 1 }, }, 'postcss-loader', ], }), |
javascript – Using autoprefixer with postcss in webpack 2.x – Stack Overflow
然后去安装这两个:
➜ ucowsapp git:(master) ✗ npm install -S postcss-cssnext cssnext npm WARN deprecated cssnext@1.8.4: cssnext is now postcss-cssnext. cssnext is deprecated. See postcss-cssnext migration guide http://cssnext.io/postcss/ npm WARN deprecated css-list@0.1.3: Deprecated. npm WARN ucows-app@6.0.0 No repository field. npm WARN ucows-app@6.0.0 No license field. added 245 packages in 51.189s
提示:
cssnext已经改名为postcss-cssnext了。
所以加到配置中:
{ // Transform our own .(less|css) files with PostCSS and CSS-modules test: /\.(less|css)$/, include: [ path.resolve(__dirname, 'src/components'), path.resolve(__dirname, 'src/container') ], use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: [{ loader: 'css-loader', options: { modules: true, sourceMap: CSS_MAPS, importLoaders: 1 } }, { loader: `postcss-loader`, options: { sourceMap: CSS_MAPS, plugins: () => { autoprefixer({ browsers: ['last 2 versions'] }); } } }, "postcss-cssnext", { loader: 'less-loader', options: { sourceMap: CSS_MAPS } } ] }) }, { test: /\.(less|css)$/, exclude: [ path.resolve(__dirname, 'src/components'), path.resolve(__dirname, 'src/container') ], use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: [{ loader: 'css-loader', options: { sourceMap: CSS_MAPS, importLoaders: 1 } }, { loader: `postcss-loader`, options: { sourceMap: CSS_MAPS, plugins: () => { autoprefixer({ browsers: ['last 2 versions'] }); } } }, "postcss-cssnext", { loader: 'less-loader', options: { sourceMap: CSS_MAPS } } ] }) },
看看效果
结果会导致所有的less都无法正常解析了。
且之前的color(的写法也还是不支持:
所以放弃。。
➜ ucowsapp git:(master) ✗ npm uninstall postcss-cssnext npm WARN ucows-app@6.0.0 No repository field. npm WARN ucows-app@6.0.0 No license field. removed 53 packages in 12.365s 【后记20181121】 后来别人: (1)告诉了,库:color – npm,有了更新的版本了; (2)推荐了相关的介绍颜色color的帖子,感兴趣的可以看看: Color Meaning, Symbolism, And Psychology: What Do Different Colors Mean | Jen Reviews |
转载请注明:在路上 » 【未解决】Preact中css代码出错:Error evaluating function `color`: keyword.toLowerCase is not a function