使用引导CSS和JS
编辑本页警告:您正在浏览的文档欧宝体育电话欧宝娱乐app下载地址Symfony 3.3，现已不再维护。
读本页的更新版本用于Sy欧宝娱乐app下载地址mfony 6.2(当前稳定版本)。
使用引导CSS和JS
想在项目中使用Bootstrap(或类似的东西)?没问题!首先，安装它。为了能够进一步定制，我们将进行安装bootstrap-sass：
1
＄Yarn添加bootstrap-sass——dev导入引导Sass
现在,bootstrap-sass生活在你的node_modules目录，您可以从任何Sass或JavaScript文件导入它。例如，如果你已经有一个global.scss文件，从那里导入它:
1 2 3 4 5 6 7
//资产/css/全球.scss//定制一些引导变量＄brand-primary：变黑（# 428 bca, 20%);//的～允许你来参考的事情在node_modules@ import“~ bootstrap-sass /资产/样式表/引导”；就是这样!这将导入node_modules / bootstrap-sass /资产/ / _bootstrap.scss样式表文件到global.scss．您甚至可以先自定义Bootstrap变量!
提示
如果你不需要所有的特性中包含特定的文件引导改为目录。~ bootstrap-sass /资产/样式表/引导/警报．
包括后bootstrap-sass，您的Webpack构建可能会变慢。要修复此问题，可以使用resolveUrlLoader选择:
1 2 3 4 5 6
// webpack.config.js返场+ .enableSassLoader(函数(sassOptions) {}， {+ resolveUrlLoader: false+})；这将禁用resolve-url-loader在Webpack中，这意味着任何url ()你的Sass文件中的路径现在必须相对于原始的源条目文件，而不是你所在的任何文件(参见url()的问题)．要加载Bootstrap，你需要重写其图标的路径:
1 2 3 4 5 6 7 8
/ /资产/ css / global.scss+ $icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";+ //设置如果你还包括font-awesome+ // $fa-font-path: "~font-awesome/fonts";@ import ~ bootstrap-sass /资产/样式表/引导的;导入Bootstrap JavaScript
Bootstrap JavaScript需要jQuery，所以确保你安装了这个:
1
＄Yarn添加jquery接下来，一定要打电话.autoProvidejQuery ()在你的webpack.config.js文件:
1 2 3 4 5
// webpack.config.js Encore //…+ .autoProvidejQuery ()；这是必需的，因为Bootstrap期望jQuery作为全局变量可用。现在，需要从任何JavaScript文件引导:
12 3 4 5 6 7 8 9 10 11 12 13 14
/ / main.jsvar$ =需要（jquery的）;// JS相当于普通的“bootstrap”包//不需要设置这个变量，只需要它需要（“bootstrap-sass”）;//或者你可以包含特定的片段/ /要求(bootstrap-sass / javascript /引导提示);/ /要求(“bootstrap-sass / javascript /引导/窗”);$ (文档时(函数（）{$ (“[data-toggle = "窗"]”) .popover ();})；多亏了autoProvidejQuery ()，你可以用类似的方式要求任何其他jQuery插件:
1 2 3 4 5 6 7
/ /……//需要JavaScript需要（“bootstrap-star-rating”）;//需要2个CSS文件需要（“bootstrap-star-rating / css / star-rating.css”）;需要（“bootstrap-star-rating /主题/ krajee-svg / theme.css”）;
