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 为 Bootstrap 字体混合不正确的 URL