一直在努力使用 Webpack 2 进行语义 ui 设置。我遇到了一些与默认语义 ui 主题中的字体相关的错误，以及另一个关于image-webpack-loader:
ERROR in ./~/css-loader?{"lessPlugins":[{"options":{"paths":{"../../theme.config":"/Users/djthomps/Desktop/demo/theme.config"}}}]}!./~/less-loader!./semantic/src/semantic.less
Module not found: Error: Can't resolve './themes/themes/default/assets/fonts/icons.eot' in '/Users/djthomps/Desktop/demo/semantic/src'
@ ./~/css-loader?{"lessPlugins":[{"options":{"paths":{"../../theme.config":"/Users/djthomps/Desktop/demo/theme.config"}}}]}!./~/less-loader!./semantic/src/semantic.less 6:285117-285174 6:285197-285254
@ ./semantic/src/semantic.less
@ ./app/index.js
@ multi (webpack)-dev-server/client?http://localhost:8080 ./app/index.js
# same for icons.woff2
# same for icons.woff
# same for icons.ttf
# same for icons.svg
ERROR in ./~/css-loader?{"lessPlugins":[{"options":{"paths":{"../../theme.config":"/Users/djthomps/Desktop/demo/theme.config"}}}]}!./~/less-loader!./semantic/src/semantic.less
Module not found: Error: Can't resolve 'image-webpack' in '/Users/djthomps/Desktop/demo'
BREAKING CHANGE: It's no longer allowed to omit the '-loader' suffix when using loaders.
You need to specify 'image-webpack-loader' instead of 'image-webpack'.
@ ./~/css-loader?{"lessPlugins":[{"options":{"paths":{"../../theme.config":"/Users/djthomps/Desktop/demo/theme.config"}}}]}!./~/less-loader!./semantic/src/semantic.less 6:218646-218697
@ ./semantic/src/semantic.less
@ ./app/index.js
@ multi (webpack)-dev-server/client?http://localhost:8080 ./app/index.js
最终目标是使用带有自定义主题的 React Semantic-ui 组件，我可以将其简单地导入到我的.jsx文件如所见这个例子 https://github.com/neekey/demo-semantic-ui-theming-with-webpack/blob/master/app/index.js.
我一直在关注本指南用于使用 Webpack 1 进行语义 UI 设置 https://github.com/neekey/demo-semantic-ui-theming-with-webpack使用 Webpack 2，修复少加载器 https://webpack.js.org/loaders/less-loader/一路走来的差异。尽管如此，在搜索其他项目后，我似乎无法解决这些问题，例如字体真棒-webpack2 https://www.npmjs.com/package/font-awesome-webpack2并筛选 github 评论。这是一个非常小的、可验证的例子：
webpack.config.js
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const RewriteImportPlugin = require('less-plugin-rewrite-import');
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
template: './app/index.html',
filename: 'index.html',
inject: 'body' // inject scripts before closing body tag
});
module.exports = {
entry: './app/index.js', // where the bundler starts the bundling process
output: { // where the bundled code is saved
path: path.resolve('dist'),
filename: 'index_bundle.js'
},
module: {
loaders: [
{
test: /\.(png|jpg|gif|woff|svg|eot|ttf|woff2)$/,
loader: 'url-loader?limit=1024&name=[name]-[hash:8].[ext]!image-webpack'
},
{
test: /\.less$/, // import css from 'foo.less';
use: [
'style-loader',
{
loader: 'css-loader',
options: {
// importLoaders: 1,
lessPlugins: [
new RewriteImportPlugin({
paths: {
'../../theme.config': __dirname + '/theme.config',
},
})
]
}
},
'less-loader'
]
},
{
test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'file-loader'
}
]
},
devtool: 'eval-source-map',
devServer: { compress: true },
plugins: [ HtmlWebpackPluginConfig ]
};
package.json
{
"name": "demo",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"start": "webpack-dev-server"
},
"devDependencies": {
"css-loader": "^0.26.1",
"html-webpack-plugin": "^2.28.0",
"image-webpack-loader": "^3.2.0",
"less-loader": "^2.2.3",
"less-plugin-rewrite-import": "^0.1.1",
"semantic-ui": "^2.2.7",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"webpack": "^2.2.1",
"webpack-dev-server": "^2.3.0"
}
}
app/index.js
import css from '../semantic/src/semantic.less';
app/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Demo</title>
</head>
<body>
<button class="ui button">Follow</button>
</body>
</html>
theme.config
// truncated for brevity
@button : 'gmail';
我的项目结构如下：
.
├── app
│ ├── index.html
│ └── index.js
├── package.json
├── semantic
│ ├── gulpfile.js
│ ├── src
│ └── tasks
├── semantic.json
├── theme.config
└── webpack.config.js
Update 1
我一直在考虑可能的解决方案：
-
postinstall感动我的脚本theme.config进入semantic文件夹，然后构建semantic就像本教程 https://www.artembutusov.com/webpack-semantic-ui/
-
postinstall脚本来替换所有theme.config使用我的版本导入（什么RewriteImportPlugin应该处理）
- 设置一个单独的 gulp 任务来处理文件的移动和语义 UI 的构建
- 端到端使用 webpack 2（首选）
Update 2
ERROR in ./~/css-loader?{"lessPlugins":[{"options":{"paths":{"../../theme.config":"/Users/djthomps/Desktop/demo/theme.config"}}}]}!./~/less-loader!./semantic/src/semantic.less
Module not found: Error: Can't resolve 'image-webpack' in '/Users/djthomps/Desktop/demo'
BREAKING CHANGE: It's no longer allowed to omit the '-loader' suffix when using loaders.
You need to specify 'image-webpack-loader' instead of 'image-webpack'.
@ ./~/css-loader?{"lessPlugins":[{"options":{"paths":{"../../theme.config":"/Users/djthomps/Desktop/demo/theme.config"}}}]}!./~/less-loader!./semantic/src/semantic.less 6:218646-218697
@ ./semantic/src/semantic.less
@ ./app/index.js
@ multi (webpack)-dev-server/client?http://localhost:8080 ./app/index.js
通过调整配置文件修复：
loader: 'url-loader?limit=1024&name=[name]-[hash:8].[ext]!image-webpack-loader' // note the loader at the end
