将上述修改整合到我提供的文件中 const path = require('path');
const fs = require('fs');
const WEB_SITE = 'mobile';
const { ZipUpload } = require("@hyfe/hy-utils").default.fs;
const TYPE_ENV = process.env.TYPE_ENV;
const envSelect = process.env.envSelect;
let destPath = "../../s2b/s2b/mobile/dist_mobile/h5"
const buildAnalyzeFlag = process.env.analyze;
const prodFlag = TYPE_ENV === 'prod';
// ==================== Webpack 5 兼容性修复 ====================
const webpackSourcesPath = require.resolve('webpack-sources');
const webpackSourcesDir = path.dirname(webpackSourcesPath);
// ============================================================
const config = {
projectName: 'mini-program-taro',
date: '2019-5-22',
designWidth: 750,
deviceRatio: {
640: 2.34 / 2,
750: 1,
828: 1.81 / 2,
},
sourceRoot: 'src',
outputRoot: `dist/${process.env.TARO_ENV}`,
// ==================== 持久化缓存配置 ====================
cache: {
enable: true,
type: 'filesystem',
buildDependencies: {
config: [__filename]
}
},
// =====================================================
alias: {
'@/assets': path.resolve(__dirname, '..', 'src/assets'),
'@/tpl-assets': path.resolve(__dirname, '..', 'node_modules/@hyfe/ui-taro/lib/assets/templates'),
'@/pages': path.resolve(__dirname, '..', 'src/pages'),
'@/service': path.resolve(__dirname, '..', 'src/service'),
'@/redux': path.resolve(__dirname, '..', 'src/redux'),
'@/utils': path.resolve(__dirname, '..', 'src/utils'),
'@/libs': path.resolve(__dirname, '..', 'src/libs'),
'taro-ui$': 'taro-ui/lib/index',
api: path.resolve(__dirname, '..', 'src/webapi'),
wmkit: path.resolve(__dirname, '..', 'src/wmkit/common'),
config: path.resolve(__dirname, '..', 'src/wmkit/config'),
immutable: path.resolve(__dirname, '..', 'src/wmkit/common/immutable.min.js'),
'@/*': path.resolve(__dirname, '..', 'src/*'),
// ==================== Webpack 兼容性别名 ====================
'webpack/sources': webpackSourcesDir
},
terser: {
enable: true,
config: {
warnings: false,
compress: {
drop_debugger: true,
drop_console: false,
},
},
},
csso: {
enable: true,
config: {
restructure: true,
},
},
sass: {
resource: [
path.resolve(__dirname, '..', 'src/pages/common/style/swipe.scss'),
path.resolve(__dirname, '..', 'node_modules/taro-ui/dist/style/components/modal.scss'),
path.resolve(__dirname, '..', 'node_modules/taro-ui/dist/style/components/switch.scss'),
path.resolve(__dirname, '..', 'node_modules/taro-ui/dist/style/components/tab-bar.scss'),
path.resolve(__dirname, '..', 'node_modules/taro-ui/dist/style/components/badge.scss'),
path.resolve(__dirname, '..', 'node_modules/taro-ui/dist/style/components/noticebar.scss'),
],
projectDirectory: path.resolve(__dirname, '..'),
data: '$nav-height: 48px;',
},
defineConstants: {
process: {
env: {
TYPE_ENV: JSON.stringify(process.env.TYPE_ENV),
envSelect: JSON.stringify(process.env.envSelect),
TARO_ENV: JSON.stringify(process.env.TARO_ENV),
analyze: JSON.stringify(process.env.analyze),
}
},
},
compiler: {
type: 'webpack5',
prebundle: {
enable: false
}
},
copy: {
patterns: [],
options: {},
},
plugins: [
[
"@tarojs/plugin-framework-react",
{
reactRefresh: true // 确保启用热更新
}
],
["babel-plugin-import", {
libraryName: "taro-ui",
customName: (name, file) => {
const nameSection = name.split('-')
if (nameSection.length === 4) {
nameSection.pop()
}
const pathMap = {
'tabs/pane': 'tabs-pane',
'modal-action': 'modal/action',
'modal-content': 'modal/content',
'modal-header': 'modal/header',
'badge': 'badge',
'switch': 'switch',
'tab-bar': "tab-bar",
'progress': 'progress',
'icon': 'icon'
}
const path = nameSection.slice(1).join('-');
return `taro-ui/lib/components/${pathMap[path] || path}`;
},
style: (name) => {
if (name.includes('/modal')) {
return 'taro-ui/dist/style/components/modal.scss'
}
const wholePath = name.split('/')
const compName = wholePath[wholePath.length - 1]
const fix = {
'tabs-pane': 'tabs',
'modal/action': 'modal',
'modal/header': 'modal',
'modal/content': 'modal',
'badge': 'badge',
'switch': 'switch',
'tab-bar': "tab-bar",
'progress': 'progress',
'icon': 'icon'
}[compName]
return `taro-ui/dist/style/components/${fix || compName}.scss`
}
}]
],
framework: 'react',
mini: {
enableSourceMap: !prodFlag,
miniCssExtractPluginOption: {
ignoreOrder: true
},
compile: {},
postcss: {
pxtransform: {
enable: true,
config: {
selectorBlackList: ['body']
},
},
url: {
enable: true,
config: {
limit: 1024,
},
},
cssModules: {
enable: false,
config: {
namingPattern: 'module',
generateScopedName: '[name]__[local]___[hash:base64:5]',
},
},
},
webpackChain(chain, webpack) {
// ==================== Webpack 兼容性修复 ====================
chain.resolve.alias.set('webpack/sources', webpackSourcesDir);
chain.optimization.minimize(true);
buildAnalyzeFlag && chain.plugin('analyzer')
.use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin, []);
chain.plugin('ignore').use(webpack.IgnorePlugin, [{
resourceRegExp: /^\.\/locale$/,
contextRegExp: /moment$/
}]);
chain.merge({
optimization: {
splitChunks: {
cacheGroups: {
// 保留原有缓存组配置...
},
},
},
});
},
lessLoaderOption: {
paths: [path.resolve(__dirname, 'node_modules'), path.resolve(__dirname, '..', 'src')],
},
imageUrlLoaderOption: {
esModule: false,
},
},
h5: {
publicPath: `/${WEB_SITE}/`,
staticDirectory: 'static',
esnextModules: ['taro-ui', '@hyfe/ui-taro', '@hyfe'],
output: {
filename: 'js/[name].[hash].js',
chunkFilename: 'js/[name].[chunkhash].js',
},
miniCssExtractPluginOption: {
filename: 'css/[name].[hash].css',
chunkFilename: 'css/[name].[chunkhash].css',
ignoreOrder: true
},
router: {
basename: `/${WEB_SITE}/`,
mode: 'browser',
},
enableSourceMap: !prodFlag,
postcss: {
autoprefixer: {
enable: true,
config: {},
},
url: {
enable: true,
config: {
limit: 1024,
},
},
cssModules: {
enable: false,
config: {
namingPattern: 'module',
generateScopedName: '[name]__[local]___[hash:base64:5]',
},
},
},
webpackChain(chain) {
// ==================== Webpack 兼容性修复 ====================
chain.resolve.alias.set('webpack/sources', webpackSourcesDir);
chain.plugin('htmlWebpackPlugin').tap((args) => {
args[0].publicPath = `/${WEB_SITE}/`;
return args;
});
chain.module.rule('script')
.exclude
.add(/app\.config\.ts$/)
chain.merge({
optimization: {
splitChunks: {
cacheGroups: {
lodash: {
name: 'lodash',
priority: 1000,
test(module) {
return /[\\/]node_modules[\\/]lodash/.test(module.resource);
},
},
},
},
}
});
if (prodFlag) {
chain.plugin('after-build-plugin')
.use(new ZipUpload({
envCode: envSelect,
scriptPath: path.resolve(__dirname, './zip_upload.sh'),
src: path.resolve(__dirname, '../dist/h5'),
dest: path.resolve(__dirname, destPath)
}));
}
},
commonChunks(commonChunks) {
commonChunks.push('lodash');
return commonChunks;
},
lessLoaderOption: {
paths: [path.resolve(__dirname, 'node_modules'), path.resolve(__dirname, '..', 'src')]
},
imageUrlLoaderOption: {
esModule: false,
},
devServer: {
host: '0.0.0.0',
port: '8080',
open: `/${WEB_SITE}/`,
},
},
};
module.exports = function (merge) {
return merge({}, config, require('./build'));
};
本文介绍了解决TaroJS项目中引入Taro-UI后出现的样式文件找不到的问题。通过更新依赖包并重新安装，成功解决了./style/index.scss未找到的错误。
扫一扫
2365
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
