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 = {
|
||||
plugins: [
|
||||
|
|
File diff suppressed because it is too large
Load Diff
|
@ -37,6 +37,7 @@
|
|||
"@speedy-tuner/ini": "^0.3.0",
|
||||
"@speedy-tuner/types": "^0.3.0",
|
||||
"antd": "^4.18.5",
|
||||
"craco-less": "^2.0.0",
|
||||
"firebase": "^9.6.4",
|
||||
"kbar": "^0.1.0-beta.27",
|
||||
"mlg-converter": "^0.5.1",
|
||||
|
@ -48,12 +49,12 @@
|
|||
"react-perfect-scrollbar": "^1.5.8",
|
||||
"react-redux": "^7.2.6",
|
||||
"react-router-dom": "^5.3.0",
|
||||
"react-scripts": "^4.0.3",
|
||||
"react-scripts": "^5.0.0",
|
||||
"uplot": "^1.6.18",
|
||||
"uplot-react": "^1.1.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@craco/craco": "^6.4.3",
|
||||
"@craco/craco": "^7.0.0-alpha.0",
|
||||
"@speedy-tuner/eslint-config": "^0.1.3",
|
||||
"@types/node": "^17.0.10",
|
||||
"@types/pako": "^1.0.3",
|
||||
|
|
|
@ -32,10 +32,7 @@ html, body {
|
|||
}
|
||||
|
||||
.app-top-bar {
|
||||
// border-bottom-width: 1px;
|
||||
// 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%);
|
||||
box-shadow: @shadow-2;
|
||||
z-index: @bars-z-index;
|
||||
}
|
||||
|
||||
|
@ -44,7 +41,6 @@ html, body {
|
|||
position: fixed;
|
||||
left: 0;
|
||||
user-select: none;
|
||||
// .border-right;
|
||||
}
|
||||
|
||||
.app-status-bar {
|
||||
|
@ -56,9 +52,6 @@ html, body {
|
|||
color: @text-color;
|
||||
z-index: @bars-z-index;
|
||||
padding-top: 5px;
|
||||
// border-top-width: 1px;
|
||||
// border-top-color: @border-color-split;
|
||||
// border-top-style: solid;
|
||||
|
||||
a {
|
||||
color: @text;
|
||||
|
|
Loading…
Reference in New Issue