[英]Webpack 2 issues with Semantic UI
Been struggling to get semantic-ui setup using Webpack 2. I a few errors relating to the fonts in the default semantic-ui theme and another error regarding image-webpack-loader
: 一直在努力使用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
The ultimate goal is to use react semantic-ui components with a custom theme that I can simply import into my .jsx
files as seen in this example . 最终目标是将react semantic-ui组件与自定义主题一起使用,我可以将其简单地导入到我的
.jsx
文件中,如本例所示 。
I've been following this guide to get semantic-ui setup with Webpack 1 using Webpack 2, fixing the less-loader differences along the way. 我一直在遵循本指南,使用Webpack 2 在Webpack 1中进行语义设置,并在此过程中修复较少的加载程序差异。 Nevertheless, I can't seem to fix these issues after scouring other projects like font-awesome-webpack2 and sifting through github comments.
尽管如此,在搜索其他项目(如font-awesome-webpack2)和筛选github注释后,我似乎无法解决这些问题。 Here's the a very small, verifiable example:
这是一个非常小的,可验证的例子:
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';
My project structure is as follows: 我的项目结构如下:
.
├── app
│ ├── index.html
│ └── index.js
├── package.json
├── semantic
│ ├── gulpfile.js
│ ├── src
│ └── tasks
├── semantic.json
├── theme.config
└── webpack.config.js
I've been contemplating possible solutions: 我一直在考虑可能的解决方案:
postinstall
script that moves my theme.config
into the semantic
folder and then build semantic
kind of like this tutorial postinstall
脚本将我的theme.config
移动到semantic
文件夹中,然后构建类似本教程的 semantic
类型 postinstall
script to replace all of the theme.config
imports with my version (what the RewriteImportPlugin
ought to be handling) postinstall
脚本用我的版本替换所有的theme.config
导入( RewriteImportPlugin
应该处理的内容) 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
is fixed by adjusting the config file: 通过调整配置文件来修复:
loader: 'url-loader?limit=1024&name=[name]-[hash:8].[ext]!image-webpack-loader' // note the loader at the end
After beating my head for three days, I finally was able to figure it out for the most part. 在打了我的头三天后,我终于能够弄明白了。
webpack.config.js
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
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'
},
resolve: {
alias: {
semantic: path.resolve(__dirname, 'semantic/src/'),
jquery: path.resolve(__dirname, 'node_modules/jquery/src/jquery')
}
},
module: {
loaders: [
{
test: /\.(png|gif)$/,
loader: 'url-loader?limit=1024&name=[name]-[hash:8].[ext]!image-webpack-loader'
},
{
test: /\.jpg$/,
loader: 'file-loader'
},
{
test: /\.less$/, // import css from 'foo.less';
use: [
'style-loader',
'css-loader',
'less-loader'
]
},
{
test: /\.(ttf|eot|svg|woff2?)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'file-loader'
}
]
},
devtool: 'eval-source-map',
devServer: { compress: true },
plugins: [
new HtmlWebpackPlugin({
template: './app/index.html',
filename: 'index.html',
inject: 'body' // inject scripts before closing body tag
}),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery'
})
]
};
but the catch is, if you want to use the bundled fonts you need to fix the paths because they're resolved incorrectly after we execute the less-loader
loader (where the bug is remains a mystery). 但问题是,如果你想使用捆绑的字体,你需要修复路径,因为在我们执行
less-loader
loader 之后它们被错误地解决了(bug仍然是个谜)。 I've created a handy template as a very minimal example with some additional details. 我已经创建了一个方便的模板作为一个非常小的例子,其中包含一些额外的细节。
Hopefully this will point you in the right direction even though its not a complete solution. 希望这将指向正确的方向,即使它不是一个完整的解决方案。 As I mentioned I spent a ridiculous amount of time trying to get Semantic-UI working with Webpack 2. I'm using the Webpack template from vue-cli for a VueJS project.
正如我所提到的,我花费了大量的时间来尝试使用Webpack 2来处理Semantic-UI。我正在使用vue-cli的Webpack模板来创建VueJS项目。 I tried stripping the Vue configuration out of the template to get an example that was framework agnostic but that didn't go well.
我尝试从模板中剥离Vue配置,以获得一个与框架无关的示例,但这并不顺利。
It looks like you might just be trying to get Semantic-UI CSS setup, and not their JS components. 看起来你可能只是试图获得Semantic-UI CSS设置,而不是他们的JS组件。 All the additions I made to the Vue Webpack template are related to JS, basically just to include jQuery for Semantic-UI.
我对Vue Webpack模板所做的所有添加都与JS有关,基本上只是包含了用于Semantic-UI的jQuery。 So if you're only interested in getting the CSS working these additions aren't necessary.
因此,如果您只对使CSS工作感兴趣,则无需添加这些内容。
In order to get the template's configuration to work with Semantic-UI JS, I added this to module-exports
为了使模板的配置与Semantic-UI JS一起使用,我将其添加到
module-exports
alias: {
...
jquery: "jquery/src/jquery",
},
...
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery"
})
]
I run Semantic's Gulp task to build to its own dist folder, and then I can simply include those files in my main.js entry for webpack. 我运行Semantic的Gulp任务来构建自己的dist文件夹,然后我可以简单地将这些文件包含在webpack的main.js条目中。
import '../semantic/dist/semantic.css'
import '../semantic/dist/semantic'
This should be the most elegant way of making semantic ui theming work for webpack2. 这应该是使webpack2具有语义ui主题的最优雅方式。
Thanks for the idea from this issue , I have updated my tutorial React+Webpack1/2/3+Semantic UI and how to do theming and the demo project 感谢这个问题的想法,我已经更新了我的教程React + Webpack1 / 2/3 + Semantic UI以及如何进行主题和演示项目
Please follow the tutorial or scroll to the bottom to see the main changes you need to make. 请按照教程或滚动到底部查看您需要进行的主要更改。 These two key differences from Webpack1 is:
与Webpack1的这两个主要区别是:
~
to refer modules in the node_modules anymore, so open your theme.config
and change the @import "~semantic-ui-less/theme.less";
~
来引用node_modules中的模块,因此打开你的theme.config
并更改@import "~semantic-ui-less/theme.less";
to @import "semantic-ui-less/theme.less";
@import "semantic-ui-less/theme.less";
const path = require('path'); const webpack = require('webpack'); const RewriteImportPlugin = require("less-plugin-rewrite-import"); const HtmlWebpackPlugin = require('html-webpack-plugin'); const ROOT_DIR = path.resolve(__dirname); const SRC_DIR = path.resolve(__dirname, 'app'); const BUILD_DIR = path.resolve(__dirname, 'build'); const NODE_MODULES_DIR = path.resolve(__dirname, 'node_modules'); var webpackConfig = { devtool: 'eval', entry: { index: path.resolve(SRC_DIR, 'index.js'), }, output: { path: BUILD_DIR, filename: '[name].[hash:8].js', }, resolve: { modules: [ROOT_DIR, 'node_modules'], }, module: { rules: [ { test: /\.(less|config)/, use: [ 'style-loader', 'css-loader', { loader: 'less-loader', options: { paths: [ROOT_DIR, NODE_MODULES_DIR], plugins: [ new RewriteImportPlugin({ paths: { '../../theme.config': __dirname + '/app/semantic-ui/theme.config', }, }), ], }, }, ], }, { test: /\.(png|jpg|gif|woff|svg|eot|ttf|woff2)$/, use: [ { loader: 'file-loader' }, ], }, { test: /\.html$/, loader: 'html-loader', }, { test: /\.jsx?$/, exclude: /(node_modules|bower_components)/, loader: 'babel-loader', query: {presets: ['es2015']} }, ], }, plugins: [ new HtmlWebpackPlugin({ inject: 'body', template: 'app/index.html', filename: 'index.html', chunks: ['index'], chunksSortMode: 'dependency', env: process.env, }), ], }; module.exports = webpackConfig;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.