laravel5.4版本中的laravel-mix与semantic UI的问题

由于对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不对导致的，但是由于不熟悉前端的处理框架，暂时无法解决这个报错。请大神赐教～～

JellyBool
8年前

你是怎么安装 semantic-ui 的？是否参照这个 https://github.com/semantic-org/semantic-ui/

0 分享
hsppl 回复 JellyBool
8年前

我是这么装的

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

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

0 分享
JellyBool 回复 hsppl
8年前

那几本就是目录没写对的问题吧，字体 和 less 的目录写对就OK了吧。

.less('semantic/src/semantic.less', 'public/css')

比如这里的 semantic/src/semantic.less 这是在哪

0 分享
hsppl 回复 JellyBool
8年前

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

0 分享
JellyBool 回复 hsppl
8年前

我是说，你的 semantic/src/semantic.less 跟 fonts 的目录之间的对应关系没有给对吧。laravist 当时引用 semantic-ui 的 css ，貌似没有遇到问题

0 分享
TonyWang
8年前

这跟 semantic ui 没有关系吧。我直接装了一个 5.4，执行 npm install 也一直是这个错误“npm ERR! Darwin 16.4.0”

0 分享
TonyWang
8年前

打开 package.json ，替换为：

"scripts": {
    "dev": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch-poll": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --watch-poll --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  }
0 分享