小贝子编程

使用NPM和SASS自定义引导程序4的正确方法



我在尝试自定义Bootstrap 4时失去了理智。实际上，每一个YouTube视频、博客文章和Bootstrap自己的文档要么缺乏足够的信息，要么令人困惑，要么已经过时，不再相关。以下是我所知道的：

  • 我知道我需要使用NPM将Bootstrap下载到我的项目目录
  • 我知道我不应该直接更改Bootstrap的源文件
  • 我知道我需要设置一个自定义的SCSS文件，并将Bootstrap函数导入该文件
  • 我知道我需要"；呼叫"；更改SCSS文件后启动
  • 我知道我需要设置、运行和编译Sass

我的问题：

  • 节点sass和常规sass之间有什么区别？我应该使用哪一个
  • 安装Sass并将其设置为监视更改的正确方法是什么
  • 如果我想使用谷歌字体，我在哪里导入/链接？在HTML中？在我的自定义SCSS文件中？两者都有
  • 导入我想要覆盖的引导函数的正确方法是什么

我知道这是很多，但说真的，网上有十亿个相互冲突的教程，它们都不适合我。非常感谢任何帮助！

节点sass和常规sass之间有什么区别？我应该使用哪一个

  • 引导程序4使用scss(Compass，它是围绕sass构建的)
  • 它们使用相似的语法，但有些函数有所不同
  • node-sass是一个为node提供绑定的库。它允许您以本机方式将.scs文件编译为css。由于使用了像NPM这样的包管理器，您将使用Node.js。这个库绑定到您的环境和Node版本，以预处理您的scs文件
  • 在gump中使用css观察程序，需要其他包才能使其工作
  • 你不需要为观察者狼吞虎咽，但很可能你必须安装Ruby Compass(现在作为一种设置有点过时，我可能错了)

安装Sass并将其设置为监视更改的正确方法是什么

等等，你已经决定使用sass了，还是你指的是scs？正确的做法是坚持Bootstrap包中的内容。如果您使用package.json文件，并且您应该使用它，那么您将需要node-sas(我认为)。可能还有其他包，但我知道它就是这样工作的。

另一件需要考虑的事情是像巴贝尔一样的变性人。Babel需要在package.json或.browserslistrc文件中进行一段设置。

因此，包中的一些要点.json：

{
"dependencies": {
"bootstrap": "^4.3.1", // your bs version
"font-awesome": "^4.7.0", // we'll get to fonts later
"jquery": "^3.4.1", // bs dependency
"popper.js": "^1.15.0" // bs dependency
},
"devDependencies": {
"@babel/core": "^7.5.5", // transpiler requirement
"@babel/preset-env": "^7.5.5", // transpiler requirement
"debounce": "^1.2.0", // gulp task, depends on your Gulpfile.js
"es6-promise": "^4.2.8",
"eslint": "^5.16.0", 
"graceful-fs": "^4.2.2",
"gulp": "^4.0.2", // your task runner Gulp
"gulp-autoprefixer": "^6.1.0", // gulp util
"gulp-babel": "^8.0.0-beta.2", // transpiler for gulp tasks
"gulp-clean": "^0.4.0", // gulp util
"gulp-clean-css": "^3.10.0",
"gulp-cli": "^2.2.0", // gulp requirement
"gulp-concat": "^2.6.1", // gulp util
"gulp-fs-cache": "^0.1.0", // gulp util
"gulp-modernizr": "^3.3.0", // great way to detect js requirements
"gulp-sass": "^4.0.2", // node-sass version for gulp
"gulp-sourcemaps": "^2.6.5", // gulp util
"gulp-uglify": "^3.0.2", // gulp util
"gulp-util": "^3.0.8", // hey gulp util
"gulp-watch-sass": "^1.4.1", // css compiler
"invariant": "^2.2.4", // not sure, probably got some warning
"minimatch": "^3.0.4", // not sure, probably got some warning
"node-gyp": "^3.8.0", // meh
"npm": "^6.11.2", // your package manager
"requirejs": "^2.3.6", // requirements in Gulpfile.js
"stream-series": "^0.1.1", // task util
"strip-ansi": "^4.0.0" // not sure, probably got some warning
},
"browserslist": [
"> 0.5%",
"not ie <= 10",
"not dead"
]
}

所以，好吧，不是真正的节点sass，但gulp-sas是一个围绕节点sass的包装器，它反过来绑定到您的环境。我知道，现在很容易和包裹混在一起。

Babel设置可以通过使用https://browserl.ist/.这用于CSS中的autoprefixer。不再需要写webkit blabla了。根据浏览器列表的设置，它会为您选择这个。

如果我想使用谷歌字体，我在哪里导入/链接？在HTML中？在我的自定义SCSS文件中？两者都有

我更喜欢的是复制包scss文件并在根目录中创建一个fonts.scss。从那里我们可以导入谷歌字体或自定义字体，如字体真棒。

我的fonts.scss文件

@import '_variables/myprojectname.custom.variables';
/*
* font-weight: 100; // Thin (Hairline)
* font-weight: 200; // Extra Light (Ultra Light)
* font-weight: 300; // Light
* font-weight: 400; // Normal
* font-weight: 500; // Medium
* font-weight: 600; // Semi Bold (Demi Bold)
* font-weight: 700; // Bold
* font-weight: 800; // Extra Bold (Ultra Bold)
* font-weight: 900; // Black (Heavy)
*/
//https://github.com/webpack-contrib/less-loader/issues/67
//https://github.com/madskristensen/BundlerMinifier/issues/191
// DIN PRO (converted)
@font-face {
font-family: "DINPro";
src: url('#{$converted-font-path}/DINPro-Light.eot');
src: url('#{$converted-font-path}/DINPro-Light.eot?#iefix') format('embedded-opentype'), url('#{$converted-font-path}/DINPro-Light.woff2') format('woff2'), url('#{$converted-font-path}/DINPro-Light.woff') format('woff'), url('#{$converted-font-path}/DINPro-Light.ttf') format('truetype'), url('#{$converted-font-path}/DINPro-Light.svg#DINPro-Regular') format('svg');
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "DINPro";
src: url('#{$converted-font-path}/DINPro-Regular.eot');
src: url('#{$converted-font-path}/DINPro-Regular.eot?#iefix') format('embedded-opentype'), url('#{$converted-font-path}/DINPro-Regular.woff2') format('woff2'), url('#{$converted-font-path}/DINPro-Regular.woff') format('woff'), url('#{$converted-font-path}/DINPro-Regular.ttf') format('truetype'), url('#{$converted-font-path}/DINPro-Regular.svg#DINPro-Regular') format('svg');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "DINPro";
src: url('#{$converted-font-path}/DINPro-Medium.eot');
src: url('#{$converted-font-path}/DINPro-Medium.eot?#iefix') format('embedded-opentype'), url('#{$converted-font-path}/DINPro-Medium.woff2') format('woff2'), url('#{$converted-font-path}/DINPro-Medium.woff') format('woff'), url('#{$converted-font-path}/DINPro-Medium.ttf') format('truetype'), url('#{$converted-font-path}/DINPro-Medium.svg#DINPro-Medium') format('svg');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: "DINPro";
src: url('#{$converted-font-path}/DINPro-MediumItalic.eot');
src: url('#{$converted-font-path}/DINPro-MediumItalic.eot?#iefix') format('embedded-opentype'), url('#{$converted-font-path}/DINPro-MediumItalic.woff2') format('woff2'), url('#{$converted-font-path}/DINPro-MediumItalic.woff') format('woff'), url('#{$converted-font-path}/DINPro-MediumItalic.ttf') format('truetype'), url('#{$converted-font-path}/DINPro-MediumItalic.svg#DINPro-MediumItalic') format('svg');
font-weight: 500;
font-style: italic;
}
@font-face {
font-family: "DINPro";
src: url('#{$converted-font-path}/DINPro-Bold.eot');
src: url('#{$converted-font-path}/DINPro-Bold.eot?#iefix') format('embedded-opentype'), url('#{$converted-font-path}/DINPro-Bold.woff2') format('woff2'), url('#{$converted-font-path}/DINPro-Bold.woff') format('woff'), url('#{$converted-font-path}/DINPro-Bold.ttf') format('truetype'), url('#{$converted-font-path}/DINPro-Bold.svg#DINPro-Bold') format('svg');
font-weight: 700;
font-style: normal;
}
// HELVETICA ROUNDED
@font-face {
font-family: "Helvetica";
src: url('#{$cond-font-path}/HelveticaRounded-BoldCond.eot');
src: url('#{$cond-font-path}/HelveticaRounded-BoldCond.eot?#iefix') format('embedded-opentype'), url('#{$cond-font-path}/HelveticaRounded-BoldCond.woff2') format('woff2'), url('#{$cond-font-path}/HelveticaRounded-BoldCond.woff') format('woff'), url('#{$cond-font-path}/HelveticaRounded-BoldCond.ttf') format('truetype'), url('#{$cond-font-path}/HelveticaRounded-BoldCond.svg#HelveticaRounded-BoldCond') format('svg');
font-weight: 700;
font-stretch: condensed;
font-style: normal;
}
// ICON
@font-face {
font-family: $ico-font-family;
src: url('#{$ico-font-path}/#{$ico-font-family}.eot?v=#{$ico-font-version}');
src: 
//url('#{$ico-font-path}/WHN-Icons.eot?#iefix&v=#{$ico-font-version}') format('embedded-opentype'),
url('#{$ico-font-path}/#{$ico-font-family}.woff?v=#{$ico-font-version}') format('woff'),
url('#{$ico-font-path}/#{$ico-font-family}.ttf?v=#{$ico-font-version}') format('truetype'),
url('#{$ico-font-path}/#{$ico-font-family}.svg?v=#{$ico-font-version}#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}

请注意我如何使用自定义变量文件的第一行。这只是Bootstrap的_variables.css的副本。我在自己的scss文件中重新创建设置并覆盖变量文件。

使用单独文件的最重要原因是字体在加载时呈现块。分离资产(字体、艺术品、图像等)使我能够使用异步CSS<link />来消除渲染阻塞问题。

自定义引导程序设置项目名称.atomic.scss:

/*!
* Atomic design principle
*/
@import "../vendor/bootstrap/scss/functions";
@import "_variables/fa.custom.variables"; // font awesome override variables
@import "_variables/projectname.custom.variables"; // bootstrap override variables
@import "../vendor/bootstrap/scss/variables";
@import "../vendor/bootstrap/scss/mixins";
@import "_mixins/company.custom.mixins"; // custom mixins
@import "../vendor/bootstrap/scss/root";
@import "../vendor/bootstrap/scss/reboot";
@import "../vendor/bootstrap/scss/type";
@import "../vendor/bootstrap/scss/images";
@import "../vendor/bootstrap/scss/code";
@import "../vendor/bootstrap/scss/grid";
@import "../vendor/bootstrap/scss/tables";
@import "../vendor/bootstrap/scss/forms";
@import "../vendor/bootstrap/scss/buttons";
@import "../vendor/bootstrap/scss/transitions";
@import "../vendor/bootstrap/scss/dropdown";
@import "../vendor/bootstrap/scss/button-group";
@import "../vendor/bootstrap/scss/input-group";
@import "../vendor/bootstrap/scss/custom-forms";
@import "../vendor/bootstrap/scss/nav";
@import "../vendor/bootstrap/scss/navbar";
@import "../vendor/bootstrap/scss/card";
@import "../vendor/bootstrap/scss/breadcrumb";
@import "../vendor/bootstrap/scss/pagination";
@import "../vendor/bootstrap/scss/badge";
@import "../vendor/bootstrap/scss/jumbotron";
@import "../vendor/bootstrap/scss/alert";
@import "../vendor/bootstrap/scss/progress";
@import "../vendor/bootstrap/scss/media";
@import "../vendor/bootstrap/scss/list-group";
@import "../vendor/bootstrap/scss/close";
@import "../vendor/bootstrap/scss/modal";
@import "../vendor/bootstrap/scss/tooltip";
@import "../vendor/bootstrap/scss/popover";
@import "../vendor/bootstrap/scss/carousel";
@import "../vendor/bootstrap/scss/utilities";
@import "../vendor/bootstrap/scss/print";
// This is where my real work comes in, for big projects this has proven to be succesful in maintaining and multisite setup
@import "atoms/atoms";
@import "molecules/molecules";
@import "organisms/organisms";
@import "tenants/projectname/themes/themes";
@import "tenants/projectname/pages/pages";

通过重新创建设置，可以很容易地覆盖默认设置。当您插入自己的变量时，只需注意!default的用法，而当!default是引导变量时，不要使用它。

我的_projectname.custom.variables.css

$design-path: "/Design" !default;
$font-family-headings: Helvetica, sans-serif !default;
$font-family-headings-fallback: DINPro, sans-serif !default;
$cond-font-path: "../../../fonts/app/helvetica-rounded-converted" !default;
$pro-font-path: "" !default;
$converted-font-path: "../../../fonts/app/din-pro-converted" !default;
$ico-font-path: "../../../fonts/app/icomoon/projectname" !default;
$ico-font-version: "xyftn5" !default;
$ico-font-family: 'icomoon' !default;
$theme-green: #7EC796 !default; // de york
$theme-yellow: #FFBD51 !default; // texas rose
$theme-red: #E24B43 !default; // cinnabar
$theme-blue: #7CB1D1 !default; // half baked
$theme-pink: #FE8980 !default; // vivid tangerine
$theme-cyan: #A5B54E !default; // olive green
$theme-indigo: #12884E !default; // salem
$theme-orange: #F77D54 !default; // coral
$theme-teal: #307A83 !default; // paradiso
// FONTAWESOME VARIABLES override
$fa-var-arrow-down: "e903";
$fa-var-arrow-left: "e900";
$fa-var-arrow-right: "e901";
$fa-var-arrow-up: "e902";
$fa-var-bars: "e914";
$fa-var-calendar: "e908";
$fa-var-chevron-down: "e907";
$fa-var-chevron-left: "e904";
$fa-var-chevron-up: "e906";
$fa-var-chevron-right: "e905";
// BOOTSTRAP VARIABLES override
$grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px );
$grid-gutter-width: 2rem;
$grid-gutter-fluid-width: 2.1875rem !default; // custom variable
$container-max-widths: ( sm: 540px, md: 720px, lg: 960px, xl: 1140px, xxl: 1340px );
// and many many more become available at your fingertips

导入我想要覆盖的引导函数的正确方法是什么

这应该在前面的问题中讨论。只需创建自己的_functions.scs并将其添加到原始函数的下面。

@import "../vendor/bootstrap/scss/functions";
@import "_functions/company.custom.functions"; // override or extend, your choice

我意识到这需要接受很多，但你问了很多：)看起来你已经掌握了窍门，或者只是一些零碎的东西。请随意询问更多信息，比如Gulpfile.js之类的。

祝你好运，消化我的一个较长的答案会很有趣^^

对您来说，最简单的事情就是使用包含bootstrap和sass的入门模板。例如：

https://github.com/abhijithvijayan/gulp-sass-bootstrap-boilerplate

然后按照说明通过npm进行安装，并查看文件夹和文件结构，看看可以将编辑放在哪里。

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium