Я изо всех сил пытался получить настройку semantic-ui с помощью Webpack 2. У меня несколько ошибок, связанных со шрифтами в теме semantic-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
файлы, как показано в этот пример.
Я следил за этим руководством по настройке семантического пользовательского интерфейса с помощью Webpack 1 с помощью Webpack 2, исправляя различия в less-loader . Тем не менее, я не могу исправить эти проблемы после изучения других проектов, таких как 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
Обновление 1
Я обдумывал возможные решения:
postinstall
, который перемещает мойtheme.config
в папкуsemantic
, а затем создаетsemantic
что-то вроде этого руководства а>postinstall
сценарий для замены всегоtheme.config
импорта моей версией (чтоRewriteImportPlugin
должно обрабатывать)- Настройте отдельную задачу gulp для обработки перемещения файлов и создания семантического пользовательского интерфейса.
- Использовать сквозной 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
.less
файлы прямо в компонент. - person djthoms   schedule 19.02.2017