Update CRACO (#396)
This commit is contained in:
parent
5e81493569
commit
20299b9998
140
craco-less.js
140
craco-less.js
|
@ -1,140 +0,0 @@
|
||||||
const path = require('path');
|
|
||||||
const { getLoader, loaderByName, throwUnexpectedConfigError } = require('@craco/craco');
|
|
||||||
|
|
||||||
const overrideWebpackConfig = ({ context, webpackConfig, pluginOptions }) => {
|
|
||||||
const throwError = (message, githubIssueQuery) =>
|
|
||||||
throwUnexpectedConfigError({
|
|
||||||
packageName: 'craco-less',
|
|
||||||
githubRepo: 'DocSpring/craco-less',
|
|
||||||
message,
|
|
||||||
githubIssueQuery,
|
|
||||||
});
|
|
||||||
|
|
||||||
const lessExtension = /\.less$/;
|
|
||||||
const options = pluginOptions || {};
|
|
||||||
const pathSep = path.sep;
|
|
||||||
|
|
||||||
const oneOfRule = webpackConfig.module.rules.find(rule => rule.oneOf);
|
|
||||||
if (!oneOfRule) {
|
|
||||||
throwError(
|
|
||||||
'Can\'t find a \'oneOf\' rule under module.rules in the ' +
|
|
||||||
`${context.env} webpack config!`,
|
|
||||||
'webpack+rules+oneOf',
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const sassRule = oneOfRule.oneOf.find(
|
|
||||||
rule => rule.test && rule.test.toString().includes('scss|sass'),
|
|
||||||
);
|
|
||||||
if (!sassRule) {
|
|
||||||
throwError(
|
|
||||||
'Can\'t find the webpack rule to match scss/sass files in the ' +
|
|
||||||
`${context.env} webpack config!`,
|
|
||||||
'webpack+rules+scss+sass',
|
|
||||||
);
|
|
||||||
}
|
|
||||||
let lessRule = {
|
|
||||||
exclude: /\.module\.(less)$/,
|
|
||||||
test: lessExtension,
|
|
||||||
use: [],
|
|
||||||
};
|
|
||||||
|
|
||||||
const loaders = sassRule.use;
|
|
||||||
loaders.forEach(ruleOrLoader => {
|
|
||||||
let rule;
|
|
||||||
if (typeof ruleOrLoader === 'string') {
|
|
||||||
rule = {
|
|
||||||
loader: ruleOrLoader,
|
|
||||||
options: {},
|
|
||||||
};
|
|
||||||
} else {
|
|
||||||
rule = ruleOrLoader;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (
|
|
||||||
(context.env === 'development' || context.env === 'test') &&
|
|
||||||
rule.loader.includes(`${pathSep}style-loader${pathSep}`)
|
|
||||||
) {
|
|
||||||
lessRule.use.push({
|
|
||||||
loader: rule.loader,
|
|
||||||
options: {
|
|
||||||
...rule.options,
|
|
||||||
...(options.styleLoaderOptions || {}),
|
|
||||||
},
|
|
||||||
});
|
|
||||||
} else if (rule.loader.includes(`${pathSep}css-loader${pathSep}`)) {
|
|
||||||
lessRule.use.push({
|
|
||||||
loader: rule.loader,
|
|
||||||
options: {
|
|
||||||
...rule.options,
|
|
||||||
...(options.cssLoaderOptions || {}),
|
|
||||||
},
|
|
||||||
});
|
|
||||||
} else if (rule.loader.includes(`${pathSep}postcss-loader${pathSep}`)) {
|
|
||||||
lessRule.use.push({
|
|
||||||
loader: rule.loader,
|
|
||||||
options: {
|
|
||||||
...rule.options,
|
|
||||||
...(options.postcssLoaderOptions || {}),
|
|
||||||
},
|
|
||||||
});
|
|
||||||
} else if (rule.loader.includes(`${pathSep}resolve-url-loader${pathSep}`)) {
|
|
||||||
lessRule.use.push({
|
|
||||||
loader: rule.loader,
|
|
||||||
options: {
|
|
||||||
...rule.options,
|
|
||||||
...(options.resolveUrlLoaderOptions || {}),
|
|
||||||
},
|
|
||||||
});
|
|
||||||
} else if (
|
|
||||||
context.env === 'production' &&
|
|
||||||
rule.loader.includes(`${pathSep}mini-css-extract-plugin${pathSep}`)
|
|
||||||
) {
|
|
||||||
lessRule.use.push({
|
|
||||||
loader: rule.loader,
|
|
||||||
options: {
|
|
||||||
...rule.options,
|
|
||||||
...(options.miniCssExtractPluginOptions || {}),
|
|
||||||
},
|
|
||||||
});
|
|
||||||
} else if (rule.loader.includes(`${pathSep}sass-loader${pathSep}`)) {
|
|
||||||
const defaultLessLoaderOptions =
|
|
||||||
context.env === 'production' ? { sourceMap: true } : {};
|
|
||||||
lessRule.use.push({
|
|
||||||
loader: require.resolve('less-loader'),
|
|
||||||
options: {
|
|
||||||
...defaultLessLoaderOptions,
|
|
||||||
...options.lessLoaderOptions,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
throwError(
|
|
||||||
`Found an unhandled loader in the ${context.env} webpack config: ${rule.loader}`,
|
|
||||||
'webpack+unknown+rule',
|
|
||||||
);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
if (options.modifyLessRule) {
|
|
||||||
lessRule = options.modifyLessRule(lessRule, context);
|
|
||||||
}
|
|
||||||
oneOfRule.oneOf.push(lessRule);
|
|
||||||
|
|
||||||
const { isFound, match: fileLoaderMatch } = getLoader(
|
|
||||||
webpackConfig,
|
|
||||||
loaderByName('file-loader'),
|
|
||||||
);
|
|
||||||
if (!isFound) {
|
|
||||||
throwError(
|
|
||||||
`Can't find file-loader in the ${context.env} webpack config!`,
|
|
||||||
'webpack+file-loader',
|
|
||||||
);
|
|
||||||
}
|
|
||||||
fileLoaderMatch.loader.exclude.push(lessExtension);
|
|
||||||
|
|
||||||
return webpackConfig;
|
|
||||||
};
|
|
||||||
|
|
||||||
module.exports = {
|
|
||||||
overrideWebpackConfig,
|
|
||||||
};
|
|
|
@ -1,4 +1,4 @@
|
||||||
const CracoLessPlugin = require('./craco-less');
|
const CracoLessPlugin = require('craco-less');
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
plugins: [
|
plugins: [
|
||||||
|
|
File diff suppressed because it is too large
Load Diff
|
@ -37,6 +37,7 @@
|
||||||
"@speedy-tuner/ini": "^0.3.0",
|
"@speedy-tuner/ini": "^0.3.0",
|
||||||
"@speedy-tuner/types": "^0.3.0",
|
"@speedy-tuner/types": "^0.3.0",
|
||||||
"antd": "^4.18.5",
|
"antd": "^4.18.5",
|
||||||
|
"craco-less": "^2.0.0",
|
||||||
"firebase": "^9.6.4",
|
"firebase": "^9.6.4",
|
||||||
"kbar": "^0.1.0-beta.27",
|
"kbar": "^0.1.0-beta.27",
|
||||||
"mlg-converter": "^0.5.1",
|
"mlg-converter": "^0.5.1",
|
||||||
|
@ -48,12 +49,12 @@
|
||||||
"react-perfect-scrollbar": "^1.5.8",
|
"react-perfect-scrollbar": "^1.5.8",
|
||||||
"react-redux": "^7.2.6",
|
"react-redux": "^7.2.6",
|
||||||
"react-router-dom": "^5.3.0",
|
"react-router-dom": "^5.3.0",
|
||||||
"react-scripts": "^4.0.3",
|
"react-scripts": "^5.0.0",
|
||||||
"uplot": "^1.6.18",
|
"uplot": "^1.6.18",
|
||||||
"uplot-react": "^1.1.1"
|
"uplot-react": "^1.1.1"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@craco/craco": "^6.4.3",
|
"@craco/craco": "^7.0.0-alpha.0",
|
||||||
"@speedy-tuner/eslint-config": "^0.1.3",
|
"@speedy-tuner/eslint-config": "^0.1.3",
|
||||||
"@types/node": "^17.0.10",
|
"@types/node": "^17.0.10",
|
||||||
"@types/pako": "^1.0.3",
|
"@types/pako": "^1.0.3",
|
||||||
|
|
|
@ -32,10 +32,7 @@ html, body {
|
||||||
}
|
}
|
||||||
|
|
||||||
.app-top-bar {
|
.app-top-bar {
|
||||||
// border-bottom-width: 1px;
|
box-shadow: @shadow-2;
|
||||||
// border-bottom-color: @border-color-split;
|
|
||||||
// border-bottom-style: solid;
|
|
||||||
box-shadow: 0px 0px 20px 0px #0000001c, 5px 5px 15px 5px rgb(0 0 0 e('/') 4%);
|
|
||||||
z-index: @bars-z-index;
|
z-index: @bars-z-index;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -44,7 +41,6 @@ html, body {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
left: 0;
|
left: 0;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
// .border-right;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.app-status-bar {
|
.app-status-bar {
|
||||||
|
@ -56,9 +52,6 @@ html, body {
|
||||||
color: @text-color;
|
color: @text-color;
|
||||||
z-index: @bars-z-index;
|
z-index: @bars-z-index;
|
||||||
padding-top: 5px;
|
padding-top: 5px;
|
||||||
// border-top-width: 1px;
|
|
||||||
// border-top-color: @border-color-split;
|
|
||||||
// border-top-style: solid;
|
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: @text;
|
color: @text;
|
||||||
|
|
Loading…
Reference in New Issue