hsppl

217 经验值

这是项目里semantic的位置,这个位置是对的吧,要不webpack也不会开始打包它呀......我看您网站上也用了semantic,您在配置的时候没有发生过类似的错误么?

我是这么装的

npm install semantic-ui --save
cd semantic/
gulp build

安装时选的auto,我觉得安装的时候并没有错误,只是wabpack打包的时候可能是少点什么,导致字体文件打包不进去

由于对webpack不太熟悉,所以在laravel5.4作为框架的项目中引用semantic UI出现了报错,部分代码如下:

// webpack.mix.js
module.exports.module={
    rules:[
        {
            test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
            loader: "file-loader"
        }
    ]
};

mix.js('resources/assets/js/app.js', 'public/js')
   .less('semantic/src/semantic.less', 'public/css')
    .version();

报错信息是这样的

.........
89% additional chunk assets processing
 94% asset optimization
 95% emitting ERROR  Failed to compile with 5 errors2:33:08 AM

These relative modules were not found:

* ./themes/themes/default/assets/fonts/icons.eot in ./~/css-loader!./~/postcss-loader!./~/less-loader?{}!./semantic/src/semantic.less
* ./themes/themes/default/assets/fonts/icons.woff2 in ./~/css-loader!./~/postcss-loader!./~/less-loader?{}!./semantic/src/semantic.less
* ./themes/themes/default/assets/fonts/icons.woff in ./~/css-loader!./~/postcss-loader!./~/less-loader?{}!./semantic/src/semantic.less
* ./themes/themes/default/assets/fonts/icons.ttf in ./~/css-loader!./~/postcss-loader!./~/less-loader?{}!./semantic/src/semantic.less
* ./themes/themes/default/assets/fonts/icons.svg in ./~/css-loader!./~/postcss-loader!./~/less-loader?{}!./semantic/src/semantic.less

                                            Asset      Size  Chunks                    Chunk Names
images/flags.png?9c74e172f87984c48ddf5c8108cabe67   28.1 kB          [emitted]         
                  /js/app.dfd67ddfa096c5cdd88d.js   1.18 MB       0  [emitted]  [big]  /js/app
                                mix-manifest.json  53 bytes          [emitted]         

npm ERR! Darwin 16.4.0
npm ERR! argv "/usr/local/Cellar/node/7.7.1/bin/node" "/usr/local/lib/node_modules/npm/bin/npm-cli.js" "run" "dev"
npm ERR! node v7.7.1
npm ERR! npm  v4.1.2
npm ERR! code ELIFECYCLE
npm ERR! @ dev: `node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the @ dev script 'node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the  package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js
.........

Process finished with exit code 1

发现导致报错的原因是webpack在处理semantic UI中的字体文件时用的loader不对导致的,但是由于不熟悉前端的处理框架,暂时无法解决这个报错。请大神赐教~~