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