Laravel Mix 中的 Bootstrap-Vue CSS 编译

Posted

技术标签:

【中文标题】Laravel Mix 中的 Bootstrap-Vue CSS 编译【英文标题】:Bootstrap-Vue CSS compilation in Laravel Mix 【发布时间】:2018-08-13 23:01:36 【问题描述】:

我正在使用 Laravel 5.6、Laravel Mix 2.0 和 Bootstrap-Vue 2.0.0-rc.1。

试图找到一种方法来配置 Laravel Mix 以将 Bootstrap-Vue 的 CSS 包含到我的 app.css 文件中,并阻止 Bootstrap-Vue 将 <style> 标记包含到页面 <head> 中。

我在包文档中看到了这个注释,但仍然不确定如何正确使用它:

注意:需要webpack配置才能加载css文件(official guide)

【问题讨论】:

【参考方案1】:

安装:

    npm i bootstrap-vue npm install --save-dev style-loader css-loader

用途:

编辑资源/js/app.js 到:

    从“vue”导入 Vue

    从“bootstrap-vue”导入 BootstrapVue

    Vue.use(BootstrapVue)

编辑资源/sass/app.scss 到:

    导入样式: 导入'~bootstrap/dist/css/bootstrap.css' 导入'~bootstrap-vue/dist/bootstrap-vue.css'

确保 app.js 和 app.css 包含在作为 vue 容器的刀片(视图)中。 见:https://bootstrap-vue.js.org/docs/

【讨论】:

我在询问 CSS。 JS 和 CSS 都适合我。只想将 CSS 从 <style> 标签移动到我编译的 CSS 文件中。 @Roman Tolstoy,你只需要添加: import 'bootstrap/dist/css/bootstrap.css';导入'bootstrap-vue/dist/bootstrap-vue.css' 这无助于摆脱 BootstrapVue 插入到 <head> 中的 <style> 标签。 @RomanTolstoy 所以你想使用<link rel="stylesheet" href="path/to/stylesheet"> 而不是<style>/** shit tons of injected css **/</style> am 已经在使用已编译的 app.css 文件(包含 Laravel Mix 编译的所有 CSS 的结果文件)。我只希望将 Bootstrap-Vue 组件中的所有这些内联样式包含在 app.css 中,而不是使页面变大。【参考方案2】:

终于找到了解决办法——ExtractTextPlugin。

let mix = require('laravel-mix');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

mix.js('resources/assets/js/app.js', 'public/js')
  .sass('resources/assets/sass/app.scss', 'public/css');

mix.webpackConfig(
  module: 
    rules: [
      
        test: /\.css$/,
        loader: ExtractTextPlugin.extract(
          fallback: 'style-loader',
          use: 'css-loader'
        )
      
    ]
  
);

参考:https://github.com/JeffreyWay/laravel-mix/issues/1589

【讨论】:

以上是关于Laravel Mix 中的 Bootstrap-Vue CSS 编译的主要内容,如果未能解决你的问题,请参考以下文章

在 laravel 5.4 mix 上添加 jQuery

Laravel Mix 和 Turbolinks

带有Laravel Mix的字体和图像源位于子文件夹中

Laravel 为 Bootstrap 字体混合不正确的 URL

如何在 Laravel 7 中使用 Webpack.mix.js 使用多个 js?

通过Mix将node_modules导入Laravel