如何在laravel 项目中运用基于bootstrap Sass文件结构 编译自己的Sass文件

  • 首先进入bootstrap官网

下载bootstrap Sass链接

如图:

如何在laravel 项目中运用基于bootstrap Sass文件结构 编译自己的Sass文件_第1张图片

下载好以后解压完目录:

如何在laravel 项目中运用基于bootstrap Sass文件结构 编译自己的Sass文件_第2张图片
Sass 文件目录.png

我们只需要吧 assets 这个目录放到项目public下面,文件目录结构图:

如何在laravel 项目中运用基于bootstrap Sass文件结构 编译自己的Sass文件_第3张图片
assets目录.png
然后点开 stylesheets 文件夹,我们会看到文件夹名字前面都有 **_ **下划线

这么一个梗, 代表文件不能被编译,好我们继续往下看,bootstrap sass 结构

在 /assets/stylesheet/中,bootstrap文件夹和bootstrap.scss,bootstrap-compass都是我们核心文件。
点开_bootstrap.scss文件 我们会看到以下目录


/*!
 * Bootstrap v3.3.7 (http://getbootstrap.com)
 * Copyright 2011-2016 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

// Core variables and mixins
@import "bootstrap/variables";  
@import "bootstrap/mixins";

// Reset and dependencies
@import "bootstrap/normalize";
@import "bootstrap/print";
@import "bootstrap/glyphicons";

// Core CSS
@import "bootstrap/scaffolding";
@import "bootstrap/type";
@import "bootstrap/code";
@import "bootstrap/grid";
@import "bootstrap/tables";
@import "bootstrap/forms";
@import "bootstrap/buttons";

// Components
@import "bootstrap/component-animations";
@import "bootstrap/dropdowns";
@import "bootstrap/button-groups";
@import "bootstrap/input-groups";
@import "bootstrap/navs";
@import "bootstrap/navbar";
@import "bootstrap/breadcrumbs";
@import "bootstrap/pagination";
@import "bootstrap/pager";
@import "bootstrap/labels";
@import "bootstrap/badges";
@import "bootstrap/jumbotron";
@import "bootstrap/thumbnails";
@import "bootstrap/alerts";
@import "bootstrap/progress-bars";
@import "bootstrap/media";
@import "bootstrap/list-group";
@import "bootstrap/panels";
@import "bootstrap/responsive-embed";
@import "bootstrap/wells";
@import "bootstrap/close";

// Components w/ JavaScript
@import "bootstrap/modals";
@import "bootstrap/tooltip";
@import "bootstrap/popovers";
@import "bootstrap/carousel";

// Utility classes
@import "bootstrap/utilities";
@import "bootstrap/responsive-utilities";


注! 不要再bootstrap 文件下写自己的scss文件,可以再同级下创建一个文件夹如:myselfBooStrap,从而编写自己的scss文件

  1. 编写自己的scss 文件前缀要和bootstrap一样,统一加上下划线如 _demo.scss.

  2. 我们编写完sass代码,如何引入呢? 如下:加入一条关键性代码.

    @import "myselfBooStrap/demo";

  3. 然而还没完,仔细看 stylesheets 下的scss文件前面也有下划线,ok.把项目文件名前的去掉

  4. Sass 编译命令 : sass 编译的文件名 (编译路径)编译的文件名  (命令如下)

     sass bootstrap.min.scss ../css/bootstrap.min.css 

    5.现在就有个疑问了,我每次编写代码,每次都得输一次命令吗? No 不需要, 文件自动监听,上代码:

sass --watch bootstrap.min.ss:../css/bootstrap.min.css

ok ! 尽情的享受sass 带来的。。。。

有不足之处,还望各位老铁提出宝贵的意见! 抱拳了!!认真脸

你可能感兴趣的:(如何在laravel 项目中运用基于bootstrap Sass文件结构 编译自己的Sass文件)