ASPNET 코어를 사용하여 Bootstrap 4 SAS 설정

기본 ASPNET MVC 템플릿은 Bootstrap 4과 함께 제공됩니다.이것은 이미 컴파일된 Bootstrap 버전입니다.부트 요소의 모양을 가져오려면 부트의 기본값을 덮어쓰고 SASS 소스 코드에서 부트를 컴파일해야 합니다.
ASPNET 커널 설정으로 부팅하는 것은 나에게 그다지 뚜렷하지 않다.나는 customize 소프트웨어 패키지를 사용해 보았지만, 이것은 나에게 작용하지 않는다.NuGet에는 프런트엔드 패키지 관리자 Bootstrap.sass이 없습니다.
본고는 다음 기술을 사용하여 ASPNET 핵심 프로젝트에서 Bootstrap 4 SAS를 설정하는 방법에 대해 설명합니다.

NPM 의 프런트엔드 패키지 관리자

웹 패키지는 SASS 파일을 컴파일하고 CSS와 JS 패키지를 만들고 축소하는 데 사용됩니다.

은 웹 페이지를 의 생성 작업으로 설정합니다.csproj 파일.

보아하니 이렇다 새로운 ASPNET MVC 프로젝트

원하는 IDE를 사용하여 새 ASPNET MVC 프로젝트를 만들거나 terminal/cmd/powershell을 사용합니다.

dotnet new mvc --name AspNetBootstrapSass

IDE 또는 명령줄에서 항목 실행

cd AspNetBootstrapSass
dotnet run

모든 것이 정상이라면 브라우저에서 기본 ASPNET 시작 페이지를 볼 수 있습니다.

부트 배포 버전 삭제

템플릿에 Bootstrap의 배포 버전이 이미 포함되어 있습니다.그러나 SASS 소스 코드에서 직접 부트하기를 원합니다.따라서 우리는 먼저 프로젝트에서 가이드 (jquery) 를 삭제할 것입니다.wwwroot/lib/bootstrap을 뜯어내다.wwwroot/lib/jquery을 뜯어내다.Views/Shared/_Layout.cshtml의 모든 스타일시트에 대한 링크를 삭제하려면 다음과 같이 하십시오.

<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />

CSS 패키지를 가리키는 링크로 바꾸면 나중에 링크가 작성됩니다.

<link rel="stylesheet" href="~/dist/bundle.css" />

부트, jQuery 및 사이트를 삭제합니다.js 스크립트:

<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>

우리가 아직 만들지 않은 자바스크립트 패키지로 바꾸기:

<script src="~/dist/bundle.js" asp-append-version="true"></script>

NPM을 사용하여 프런트엔드 패키지 추가

우리는 을 사용하여 우리가 필요로 하는 소프트웨어 패키지를 가져올 것이다.시스템에 NodeJ와 NPM이 이미 설치되어 있다고 가정합니다.프로젝트 루트 폴더에 다음 package.json을 추가합니다.

Package.json은 두 가지 의존항을 포함하고 있습니다. Bootstrap과 jQuery입니다. jQuery는 Bootstrap의 의존항입니다.Webpack과 SASS와 관련된 많은 예비 프로세서는 개발 의존 항목으로 포함되어 있다.우리는 SASS 소스 코드를 컴파일하기 위해 이것들이 필요하다

Package.json에는 스크립트, build과 production도 포함되어 있습니다. 저희는 이따가 그것들을 사용하여 웹 패키지 구축 과정을 시작할 것입니다

실행 npm install 모든 소프트웨어 패키지 설치

npm install

현재 node\u modules 폴더에 안내가 있습니다. 이 폴더를 버전 제어에 추가하지 마십시오.우리는 지금 안내를 참고할 수 있다.사용자 정의 scss 파일에서 온 scss 파일

NPM 회사 SASS 파일 설정

저희 wwwroot에는 css 폴더가 있습니다.scss으로 이름을 바꾸겠습니다.site.css의 이름을 site.scss으로 변경합니다.CSS 파일은 항상 유효한 SCSS 파일임을 기억하십시오

_variables.scss이라는 파일도 만듭니다.여기에는 부트 덮어쓰기(예: 배경색과 테마색 덮어쓰기)가 포함됩니다.부트를 가져오기 전에 가져와야 합니다

사이트 상단에 다음 내용을 추가합니다.scss

여기서 무슨 일이 일어났습니까?부트 덮어쓰기가 포함된 _variables.scss을 가져오는 중입니다.그런 다음 부트 프로그램 자체를 가져옵니다.아래의 모든 내용은 우리가 직접 정의한 CSS/SCS

Configure Webpack

_Layout.cshtml에서 인용한 CSS와 JS 패키지를 만들기 위해 웹 팩을 설정해야 합니다.프로젝트 루트 폴더에 다음 webpack.config.js을 추가합니다

나는 여기서 구체적인 웹 페이지의 세부 사항을 깊이 토론하지 않을 것이다.중요한 것은 생산 모델에서 CSS와 JS 번들이 축소되고 개발 모델에서 번들은 읽을 수 있다는 것이다

Webpack을 실행하려면 package.json에 정의된 스크립트 중 하나를 호출할 수 있습니다

npm run build

결과 wwwroot\dist.우리는 두 개의 파일을 찾았다. bundle.css과 bundle.js이다.우리는 이미 _Layout.cshtml에서 이 파일들을 인용했다

소형 빔 운행을 가진 생산 모델에 대해:

npm run production

Adding Webpack build to project file

SASS 파일을 변경할 때마다 npm build을 실행하지 않으려면 명령을 프로젝트 파일에 추가하여 자동으로 이 절차를 수행할 수 있습니다

아래 코드 세그먼트를 AspNetBootstrapSass.csproj

에 추가

Conclusion

위의 설정을 사용하면 원하는 대로 부트 분포를 사용자 정의할 수 있고 MVC 프로젝트에서 SASS를 사용할 수 있습니다.예제 항목을 찾을 수 있습니다:

/ robinvanderknaap

Example project showing how to setup Bootstrap SASS in a ASPNET Core project

aspnet-bootstrap-sass Alexander Sinn 표지사진 촬영

Reference

이 문제에 관하여(ASPNET 코어를 사용하여 Bootstrap 4 SAS 설정), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/robinvanderknaap/setting-up-bootstrap-4-sass-with-aspnet-core-4ff6

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)