折腾：
【部分解决】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.jsError 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 [email protected]: cssnext is now postcss-cssnext. cssnext is deprecated. See postcss-cssnext migration guide http://cssnext.io/postcss/ npm WARN deprecated [email protected]: Deprecated. npm WARN [email protected] No repository field. npm WARN [email protected] 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 [email protected] No repository field. npm WARN [email protected] 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