微笑んでいるsapperと幽霊.CSS

今日はどのように追加する方法を共有したいと思いますSpectre.css to Sapper 正しい方法
あなたがこれを読んでいるならば、チャンスはあなたがすでにこれらのフレームワークを聞いたか、多分ちょうどあなたが好奇心旺盛な人であるということです.どちらも、迅速かつ簡単にWeb開発を行う光、シンプルかつ簡単なツールです.彼らについて知らない人のために、上記のリンクに頭をつけて、彼らと知り合いになってください.あなたは彼らが私のようにおもしろいかもしれない.
一言で言えば、スペクトルを説明できました.ブートストラップまたはBulmaのようなフレームワークのための軽い交換としてのCSS.デフォルトでは、デフォルトでプロジェクトを実行します.Tailwindのような無限のクラスはありません.
それで始めましょう.

新しいSAPPERプロジェクトを作成する

まず最初に、新しいSAPPERプロジェクトを作成する必要があります.
だからあなたのお気に入りのターミナルを開き、デフォルトのSAPPERテンプレートを取得

npx degit "sveltejs/sapper-template#rollup" sapper-spectrecss

新しく作成したフォルダを開く

cd sapper-spectrecss

依存関係をインストールする

npm i

スペクトルを追加します。CSS依存

さて、もちろん、テンプレートファイルの先頭にリンクできます/src/template.html 幽霊CSSのようなので

<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre.min.css">
<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-exp.min.css">
<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-icons.min.css">

しかし、それは我々が本当に望むものでありません.以来、我々はスペクトルを微調整することはできません.CSS pragmaticallyと我々のニーズのためのそれのカスタムバージョンを作成します.それで、あなたが本当に速くそれをチェックしない限り、前のステップをスキップしてください.
さて、次のNPMパッケージを追加しましょう.
開発依存性としてのsvelteプリプロセッサとsass

npm i node-sass svelte-preprocess autoprefixer -D

と実際のスペクトル.CSS

npm i spectre.css 

今すぐあなたpackage.json ファイルはこのように見えるはずです

{
  "name": "sapper-spectrecss-template",
  "description": "A light and beautiful template for Sapper with Spectre.css",
  "version": "0.0.1",
  "scripts": {
    "dev": "sapper dev",
    "build": "sapper build --legacy",
    "export": "sapper export --legacy",
    "start": "node __sapper__/build",
    "cy:run": "cypress run",
    "cy:open": "cypress open",
    "test": "run-p --race dev cy:run"
  },
  "dependencies": {
    "compression": "^1.7.1",
    "polka": "next",
    "sirv": "^1.0.0",
    "spectre.css": "^0.5.9"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
    "@babel/plugin-transform-runtime": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "@babel/runtime": "^7.0.0",
    "@rollup/plugin-babel": "^5.0.0",
    "@rollup/plugin-commonjs": "^14.0.0",
    "@rollup/plugin-node-resolve": "^8.0.0",
    "@rollup/plugin-replace": "^2.2.0",
    "autoprefixer": "^9.8.6",
    "node-sass": "^4.14.1",
    "npm-run-all": "^4.1.5",
    "rollup": "^2.3.4",
    "rollup-plugin-svelte": "^5.0.1",
    "rollup-plugin-terser": "^6.1.0",
    "sapper": "^0.28.0",
    "svelte": "^3.17.3",
    "svelte-preprocess": "^4.1.1"
  }
}

設定ファイルの編集

オープンユアrollup.config.js そして、インポートの下に次の権利を加えてください

import sveltePreprocess from 'svelte-preprocess';

const preprocess = sveltePreprocess({
    scss: {
      includePaths: ['src'],
    },
    postcss: {
      plugins: [require('autoprefixer')],
    },
});

また、あなたがpreprocess あなたのsvelteプラグインにクライアントとサーバーのように

svelte({
    dev,
    hydratable: true,
    emitCss: true,
    preprocess
 }),

新しいファイルを作りましょうsvelte.config.js プロジェクトテンプレートのルートで.それがautoprefixerで働くことができるように、我々はセットアップをsvelteします

const sveltePreprocess = require('svelte-preprocess');

module.exports = {
  preprocess: sveltePreprocess({
    scss: {
      includePaths: ['src'],
    },
    postcss: {
      plugins: [require('autoprefixer')],
    },
  }),
};

カスタマイズあなたのスタイル

最後に、デフォルトのSAPPERテンプレートからすべての不要なCSSスタイルを削除して削除できます.間のすべてを削除<style></style> すべてのタグ.svelte にあるファイル/src/routes と/src/components . あなたのコンテンツを空にすることができますglobal.css ファイル/static フォルダも.
中にはstatic フォルダを作成しますstyles新しく作成static ファイルを作成するglobal.scss

@import "./theme.scss";

と実際の作成theme.scss どこにすべての幽霊.CSS変数は、我々の好みに変更されることができました

// Define variables to override default ones
$primary-color: rgb(255,62,0);
$error-color: #c02020;
$font-size: 0.9rem;
$font-size-sm: .8rem;
$font-size-lg: 1rem;

// Import full Spectre source code
@import "../../node_modules/spectre.css/src/spectre";

これを加える_layout.svelte

<style lang="scss" global>
     @import "../../static/styles/global.scss";
</style>

コードに戻る

我々はすべて設定され、我々は実行してルートフォルダからプロジェクトを起動することができます

npm run dev

微調整のビットを使用すると、あなたの挨拶を参照してくださいする必要がありますlocalhost:3000
こちらがlink 行動の最終結果に.
今すぐ短い場合は、今まですべてをスキップすることができます短いです.クローンgithub repo また、依存関係をインストールします.それで

git clone https://github.com/gevera/sapper-spectrecss-template
cd sapper-spectrecss-template
npm i
npm run dev

うまくいけば、あなたはこのチュートリアルが役に立つとわかりました.
あなたがこれらのものすごいフレームワークを集積している問題につまずくならば、下記のコメントで知らせてください.
ああ、私は好奇心旺盛な、どのようなあなたのCSSのフレームワークを移動し、どのように簡単にサッパーでそれを統合することですか?
歓声