Sapper와 Spectre.css와 친해지기

오늘은 올바른 방법으로 Spectre.css에 Sapper을 추가하는 방법을 공유하고자 합니다.

이 글을 읽고 있다면 이러한 프레임워크에 대해 이미 들어봤거나 호기심이 많은 사람일 가능성이 있습니다. 둘 다 웹 개발을 빠르고 쉽게 만들어주는 가볍고 간단하며 직관적인 도구입니다. 잘 모르시는 분들은 위의 링크로 가셔서 알아보세요. 내가 한 것처럼 그것들이 흥미로울 수 있습니다.

간단히 말해서 Spectre.css는 부트스트랩이나 Bulma와 같은 프레임워크의 가벼운 대체품이라고 할 수 있습니다. Sane은 기한이 있는 진행 중인 프로젝트의 기본값입니다. Tailwind와 같은 끝없는 클래스는 없습니다(세부적인 제어를 위해 Tailwind.css를 좋아하지만).

시작하겠습니다.

새 Sapper 프로젝트 만들기

먼저 새 Sapper 프로젝트를 생성해야 합니다.
좋아하는 터미널을 열고 기본 Sapper 템플릿을 받으세요.

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

새로 만든 폴더를 엽니다.

cd sapper-spectrecss

Sapper 종속성 설치

npm i

Spectre.css 종속성 추가

물론 이제 템플릿 파일/src/template.html의 헤드에서 Spectre.css CDN을 다음과 같이 연결할 수 있습니다.

<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">

그러나 그것은 우리가 진정으로 원하는 것이 아닙니다. Spectre.css를 실용적으로 조정할 수 없고 필요에 따라 맞춤 버전을 만들 수 없기 때문입니다. 따라서 정말 빨리 확인하고 싶지 않다면 이전 단계를 건너뛰세요.

자, 이제 다음 npm 패키지를 추가하겠습니다.
Svelte 전처리기 및 SASS를 개발 종속성으로 사용

npm i node-sass svelte-preprocess autoprefixer -D

그리고 실제 Spectre.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')],
    },
});

또한 클라이언트와 서버의 svelte 플러그인에 preprocess를 추가했는지 확인하십시오.

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

프로젝트 템플릿의 루트에 svelte.config.js라는 새 파일을 생성해 보겠습니다. autoprefixer와 함께 작동할 수 있도록 svelte-preprocess를 설정합니다.

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";

그리고 모든 Spectre.css 변수를 원하는 대로 수정할 수 있는 실제theme.scss를 만듭니다.

// 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 프레임워크는 무엇이며 Sapper와 통합하기가 얼마나 쉬운가요?

건배