如何将Bootswatch主题放在本地？

Question

我正在使用这的子主题，我找不到任何帮助。

• 引导-障碍-安装
• 障碍启动器-工具包

我目前正在使用布斯沃特的CDN模式。我想把所有东西都放在本地。

以下是我所做的：

1. 我在服务器上运行了以下两个命令：

mkdir -p web/libraries/bootstrap
cp -R vendor/twbs/bootstrap/dist web/libraries/bootstrap

1. 我修改了bootstrap_subtheme_front_office.info.yml文件：

name: Bootstrap Subtheme Front Office
type: theme
description: 'SASS starter kit for a Bootstrap Barrio SubTheme.'
# version: VERSION
core: 8.x
core_version_requirement: ^8 || ^9
base theme: bootstrap_barrio

libraries:
  - bootstrap_subtheme_front_office/bootstrap
  - bootstrap_subtheme_front_office/global-styling
libraries-override:
  bootstrap_barrio/global-styling: true
  bootstrap_barrio/file: true
regions:
  navigation_collapsible_first: 'Navigation (Collapsible first)'
  navigation_collapsible_left: 'Navigation (Collapsible left)'
  navigation: 'Navigation'
  navigation_collapsible_right: 'Navigation (Collapsible right)'
  navigation_collapsible_second: 'Navigation (Collapsible second)'
  breadcrumb: 'Breadcrumb'
  header: 'Top Bar'
  sidebar_first: 'Primary'
  highlighted: 'Highlighted'
  help: 'Help'
  content: 'Content'
  sidebar_second: 'Secondary'
  footer: 'Footer'

# Information added by Drupal.org packaging script on 2020-10-11
version: '5.0.2'
project: 'bootstrap_subtheme_front_office'
datestamp: 1602444143

我修改了bootstrap_subtheme_front_office.libraries.yml文件：

global-styling:
  version: VERSION
  js: 
    js/popper.min.js: {}
    js/bootstrap.min.js: {}
    js/barrio.js: {}
    js/custom.js: {}
    js/back-to-top.js: {}
    js/copy-to-clipboard.js: {}
  css:
    component:
      css/style.min.css: {}
  dependencies:
    - core/jquery
    - core/drupal
bootstrap:
  js:
    /libraries/bootstrap/dist/js/bootstrap.bundle.min.js: {}
  css:
    component:
      /libraries/bootstrap/dist/css/bootstrap.min.css: {}

1. 我将4个Bootswatch平面文件下载到我的计算机上：

我复制了文件夹中的4个文件

/libraries/bootswatch/dist/flatly

1. 我执行了gulp和drush cr命令。

MY问题

如何申报Bootswatch？把文件放哪儿？

Answer 1

主题无法读取SCSS文件。你必须把他们转化为CSS。要做到这一点，请按照以下说明进行操作。

1. 创建一个新的SCSS (让我们将它命名为"custom.scss")并将所有SCSS导入到这个文件中。并将其转换为CSS。“在新的"custom.scss”文件中，导入"_bootswatch.scss“和"_variables.scss”。
2. 使用SCSS编译器将SCSS转换为CSS。将"custom.scss“文件隐藏到"custom.css"，然后将该文件缩小为"custom.min.css”。
3. 在您的"bootstrap_subtheme_front_office.libraries.yml“文件中，包含"custom.min.css”。在"css/style.min.css: {}“css/custom.min.css: {}下面添加以下代码