代码之家  ›  专栏  ›  技术社区  ›  WKrooshof

Web包找不到(字体)依赖项

  •  1
  • WKrooshof  · 技术社区  · 7 年前

    NPM/Web包找不到与Laravel Mix的依赖项

    These dependencies were not found:
    
    * font-awesome
    * ionicons
    
    
    ERROR in multi lodash jquery bootstrap-sass fastclick jquery-slimscroll admin-lte icheck ionicons font-awesome datatables.net datatables.net-bs
    Module not found: Error: Can't resolve 'font-awesome' in 'D:\Laragon'
     @ multi lodash jquery bootstrap-sass fastclick jquery-slimscroll admin-lte icheck ionicons font-awesome datatables.net datatables.net-bs
    

    更清楚。这些都已安装(可以在node\u模块中找到),并且要求位置正确。我也在使用更多的软件包,巧合的是,这些问题与我的网页中仅有的字体有关。

    可在 package.json package.json.lock .

    安装尝试不同的方法:首先 npm install --save-dev ,也尝试过 yarn install yarn add .

    我的 webpack.mix.js :

    let mix = require('laravel-mix');
    
    /*
     |--------------------------------------------------------------------------
     | Mix Asset Management
     |--------------------------------------------------------------------------
     |
     | Mix provides a clean, fluent API for defining some Webpack build steps
     | for your Laravel application. By default, we are compiling the Sass
     | file for the application as well as bundling up all the JS files.
     |
     */
    
    mix.webpackConfig({
        module: {
            loaders: [
                {
                    test: /\.js?/,
                    exclude: [/node_modules/, /styles/],
                    loaders: ['babel'],
                    include: path.join(__dirname, 'src')
                },
                {
                    test: /\.scss$/,
                    loader: 'style!css!resolve-url!sass?sourceMap'
                },
                {
                    test: /\.css$/,
                    loader: "style-loader!css-loader"
                },
                {
                    test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                    loader: 'url-loader?limit=10000&mimetype=application/font-woff'
                },
                {
                    test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                    loader: 'file-loader'
                }
            ]
        }
    });
    
    mix.js('resources/assets/js/app.js', 'public/js')
       .sass('resources/assets/sass/app.scss', 'public/css');
    
    mix.js('resources/assets/js/auth.js', 'public/js')
       .sass('resources/assets/sass/auth.scss', 'public/css');
    
    mix.js('resources/assets/js/admin-lte.js', 'public/js')
       .sass('resources/assets/sass/admin-lte.scss', 'public/css');
    
    mix.autoload({
        jquery: [ '$', 'jQuery', 'jquery'],
        DataTable: 'datatables.net-bs'
    });
    
    mix.extract([
        'lodash', 'jquery', 'bootstrap-sass',
        'fastclick', 'jquery-slimscroll', 'admin-lte',
        'icheck', 'ionicons', 'font-awesome',
        'datatables.net', 'datatables.net-bs'
    ], 'public/js/vendor.js');
    
    mix.version();
    

    我也试过了 mix.webpackConfig ,添加配置这是修复字体的不顾一切的尝试。

    这是我的包裹。json:

    {
        "private": true,
        "scripts": {
            "dev": "npm run development",
            "development": "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": "npm run watch -- --watch-poll",
            "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",
            "prod": "npm run production",
            "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
        },
        "devDependencies": {
            "admin-lte": "^2.4.2",
            "axios": "^0.17",
            "bootstrap": "^4.0.0",
            "cross-env": "^5.1.3",
            "datatables.net": "^1.10.16",
            "fastclick": "^1.0.6",
            "font-awesome": "^4.7.0",
            "icheck": "^1.0.2",
            "ionicons": "^3.0.0",
            "jquery": "^3.3.1",
            "jquery-slimscroll": "^1.3.8",
            "laravel-mix": "^2.0",
            "lodash": "^4.17.4",
            "popper.js": "^1.12",
            "script-loader": "^0.7.2"
        },
        "dependencies": {
            "bootstrap-sass": "^3.3.7",
            "datatables.net-bs": "^1.10.16"
        }
    }
    

    在我的。SCS:

    @import '~font-awesome/scss/font-awesome';
    

    在Mac和Windows 10上

    2 回复  |  直到 7 年前
        1
  •  0
  •   Ryan Kozak    7 年前

    在您的NPM配置中包含字体真棒

    "devDependencies": {
       ......
       ......
        "font-awesome": "^4.7.0"
    }
    

    npm update

    然后是你的应用程序。SCS包括此

    // Font Awesome
    @import "~font-awesome/scss/font-awesome.scss";
    

    npm dev 或“npm手表”

        2
  •  0
  •   WKrooshof    7 年前

    摆脱 font-awesome ionicons 从extract函数解决了这个问题。