Javascript Webpack 2语义用户界面问题
一直在努力使用Webpack 2获得语义ui设置。我发现了一些与默认语义ui主题中的字体相关的错误，以及另一个与Javascript Webpack 2语义用户界面问题,javascript,webpack,less,semantic-ui,webpack-2,Javascript,Webpack,Less,Semantic Ui,Webpack 2,一直在努力使用Webpack 2获得语义ui设置。我发现了一些与默认语义ui主题中的字体相关的错误，以及另一个与图像网页加载程序相关的错误： ERROR in ./~/css-loader?{"lessPlugins":[{"options":{"paths":{"../../theme.config":"/Users/djthomps/Desktop/demo/theme.config"}}}]}!./~/less-loader!./semantic/src/semantic.less Mod
图像网页加载程序相关的错误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
.jsxwebpack.config.jspackage.jsonapp/index.jsapp/index.html.
├── app
│ ├── index.html
│ └── index.js
├── package.json
├── semantic
│ ├── gulpfile.js
│ ├── src
│ └── tasks
├── semantic.json
├── theme.config
└── webpack.config.js
postinstalltheme.configsemanticsemanticpostinstalltheme.config loader: 'url-loader?limit=1024&name=[name]-[hash:8].[ext]!image-webpack-loader' // note the loader at the end
希望这将为您指明正确的方向，即使这不是一个完整的解决方案。正如我提到的，我花了大量时间试图让语义用户界面与Webpack2协同工作。我正在将from vue cli用于VueJS项目。我尝试从模板中剥离Vue配置，以获得一个与框架无关的示例，但效果并不理想 看起来您可能只是想获得语义UI CSS设置，而不是它们的JS组件。我对Vue Webpack模板所做的所有添加都与JS相关，基本上只是为了包含用于语义UI的jQuery。因此，如果您只想让CSS工作，那么这些添加是没有必要的 为了让模板的配置与语义UI JS配合使用，我将其添加到
模块导出中alias: {
...
jquery: "jquery/src/jquery",
},
...
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery"
})
]
import '../semantic/dist/semantic.css'
import '../semantic/dist/semantic'
经过三天的苦思冥想，我终于大致明白了这一点
webpack.config.js但问题是，如果您想使用捆绑字体，您需要修复路径，因为在我们执行
less loader- 默认情况下，less-loader将使用webpack的解析器解析所有less文件，使得less-plugin-rewrite-import等插件无法处理较少的文件。这就是为什么你会发现这个插件不适用于webpack2。要让更少的加载程序使用自己的解析器，您需要手动指定要搜索的选项路径（查看下面粘贴的网页配置）
- 由于现在我们使用的解析器越来越少，我们不能再使用
引用节点中的模块了，所以请打开~
并更改theme.config
到@import“~semantic ui less/theme.less”@import“语义ui less/theme.less”
如果您想将语义用于React，他们正在开发一个很好的组件库：。你还必须包括
// truncated for brevity
@button : 'gmail';
.
├── app
│ ├── index.html
│ └── index.js
├── package.json
├── semantic
│ ├── gulpfile.js
│ ├── src
│ └── tasks
├── semantic.json
├── theme.config
└── webpack.config.js
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
alias: {
...
jquery: "jquery/src/jquery",
},
...
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery"
})
]
import '../semantic/dist/semantic.css'
import '../semantic/dist/semantic'
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'
})
]
};