【发布时间】：2017-07-08 08:56:46
【问题描述】：
一直在努力使用 Webpack 2 设置语义用户界面。我遇到了一些与默认语义用户界面主题中的字体相关的错误，以及另一个关于 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 文件中，如 this example 所示。
我一直在使用 Webpack 2 关注 this guide to get semantic-ui setup with Webpack 1，并在此过程中修复了 less-loader 的差异。尽管如此，在搜索了 font-awesome-webpack2 等其他项目并筛选了 github cmets 之后，我似乎无法解决这些问题。这是一个非常小的、可验证的示例：
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
更新 1
我一直在考虑可能的解决方案：
-
postinstall脚本将我的theme.config移动到semantic文件夹中，然后构建semantic有点像 this tutorial -
postinstall脚本用我的版本替换所有theme.config导入（RewriteImportPlugin应该处理的内容） - 设置单独的 gulp 任务来处理文件的移动和语义 UI 的构建
- 端到端使用 webpack 2（首选）
更新 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
【问题讨论】：
-
如果你想在 React 中使用语义，他们正在开发一个不错的组件库：react.semantic-ui.com/introduction。您仍然必须手动包含 css。使用任何自定义 css/sass ......祝你好运，我浪费了很多时间让它工作。
-
@BalázsÉdes 我知道组件库。这个想法是我希望能够注入自己的主题并将
.less文件直接导入组件中。 -
所以我可以告诉你我在这方面也花了很长时间（用于 VueJS），最后我只是使用他们的 gulp 任务构建了语义 ui，并包含了从语义 dist 生成的 CSS 和 JS 文件.它实际上工作得很好，gulp watch 获取主题的更改并重新构建，然后 webpack 热重新加载，
-
@Justin 我实际上是从这条路开始的......很高兴知道其他人正在为同样的事情而苦苦挣扎并思考同样的事情。
-
@Justin 你能详细说明你是如何使用 Webpack 2 来实现这个功能的吗？当我使用常规的旧 css 时，我仍然遇到同样的错误
标签： javascript webpack less semantic-ui webpack-2