Webpack / npm - 如何安装 jquery、bootstrap 和 bootstrap-tables

Question

我有一个 laravel7 使用 blade 模板的项目，目前我正在使用 webpack，我得到一个编译错误，显示在 post.

文件webpack.mix.js

const mix = require('laravel-mix');

mix.js([
    'resources/assets/js/app.js',
    'resources/assets/vendor/popper/popper.min.js',
    'resources/assets/vendor/bootstrap/bootstrap.min.js',
    'resources/assets/vendor/bootstrap/bootstrap.bundle.min.js',
    'resources/assets/vendor/boostrap-table/bootstrap-table.min.js',
    'resources/assets/vendor/boostrap-table/bootstrap-table-es-ES.min.js',
], 'public/js/app.js')
    .sass('resources/assets/sass/app.scss', 'public/css/app.css');

文件app.js

    require('./bootstrap');

文件app.scss

@import "../vendor/bootstrap/bootstrap.min.css";
@import "../vendor/boostrap-table/bootstrap-table.min.css";
@import '../../../node_modules/@fortawesome/fontawesome-free/scss/fontawesome';
@import '../../../node_modules/@fortawesome/fontawesome-free/scss/regular';
@import '../../../node_modules/@fortawesome/fontawesome-free/scss/solid';
@import '../../../node_modules/@fortawesome/fontawesome-free/scss/brands';
@import "style";


@import "../vendor/twitter-boostrap/bootstrap.css";
@import "../vendor/twitter-boostrap/bootstrap-datetimepicker.css";

最后两行是让我在执行 npm 运行 watch 时失败的行我得到的错误是这个

ERROR in ./resources/assets/vendor/twitter-boostrap/bootstrap.css 
(./node_modules/css-loader/dist/cjs.js??ref--5-2!./node_modules/postcss-loader/src??
postcss0!./resources/assets/vendor/twitter-boostrap/bootstrap.css)
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
Error: Can't resolve '../fonts/glyphicons-halflings-regular.eot' in 
'C:\Apache24\htdocs\laravel\resources\assets\vendor\twitter-boostrap'

Answer 1

很可能是混合导致了错误，因为字体的 url 路径不是绝对的。你应该试试这个。

.sass('resources/assets/sass/app.scss', 'public/css/app.css')
.options({
    processCssUrls: false
});

更多信息在这里：https://laravel.com/docs/8.x/mix#url-processing

Webpack / npm - 如何安装 jquery、bootstrap 和 bootstrap-tables

Webpack / npm - How to install jquery, bootstrap and boostrap-tables

laravel

webpack

webpack-4

laravel-6

laravel-7