Magento 2에서 사용자 정의 CSS 파일을 추가하는 방법

캐스케이드에서 마지막으로로드되는 자체 CSS 파일을 작성하는 방법이 있습니까?

그렇다면 사용자 정의 CSS 파일을 어떻게 그리고 어디에 추가합니까?

magento2 css

— H. 페 렌스
소스

답변:

사용자 정의 CSS를 추가하고 마지막으로로드하려면 사용자 정의 테마를 설정해야합니다.

테마 만들기 : http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/theme-create.html
Magento 애플리케이션을 개발자 모드로 설정했는지 확인하십시오.
다음 테마를 사용자 정의 테마에 추가하십시오

 app / design / frontend / [vendor] / [theme] / Magento_Theme / layout
 app / design / frontend / [vendor] / [theme] / web / css

다음 파일을 작성하십시오.

app / design / frontend / [vendor] / [theme] / Magento_Theme / layout / default_head_blocks.xml
app / design / frontend / [vendor] / [theme] / web / css / local-m.css
app / design / frontend / [vendor] / [theme] / web / css / local-l.css

이 코드를 default_head_blocks.xml 내에 배치하십시오

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../vendor/magento/framework/Module/etc/module.xsd">
  <head>
    <css src="css/local-m.css" />
    <css src="css/local-l.css" media="screen and (min-width: 768px)"/>
  </head>
</page>

테마를 적용하십시오 : http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/theme-apply.html
정적 리소스 배포 (SSH to magento root) :

php bin/magento setup:static-content:deploy

— 여호수아 34
소스

안녕하세요, 방금 추가했지만 추가 한 CSS 파일이로드되지 않으며 페이지를 검사 할 때 500 (내부 서버 오류)과 함께 파일에 대한 GET 오류가 발생합니다. 아마도?

— alexcr

배포 할 CLI 명령 : php bin / magento setup : static-content : deploy

— Joshua34

내가 만든 두 개의 새로운 CSS 파일에 무엇을 넣어야합니까? 그냥 순수한 CSS ??

— styzzz

@ styzzz 예, 원시 CSS는 괜찮습니다.

— Joshua34

예. 방금 그렇게 했으므로 local-m.css 및 local-l.css 파일을 web / css에 업로드했습니다 ... 캐시를 지우고 php bin / magento setup : static-content : deploy를 실행했습니다. 개발자 모드에 있습니다. 여전히 픽업하지 않습니다. 내 default_head_blocks.xml은 정확히 위와 같습니다. 그러나 여전히 CSS에서 설정 한

— stype을

사용자 정의 CSS를 추가하고 마지막으로로드하려면

디렉토리 구조를 따르십시오

응용 프로그램 / 코드 / 공급 업체 / 모듈 이름 /보기 / 프론트 엔드 (admin adminhtml의 경우) / 웹 / css / filename.css

아래 주어진대로 CSS 파일 경로를 해당 레이아웃 파일에 추가하십시오

<head>
  <css src="Vendor_Module::css/filename.css"/>
</head>
<body>
 ....
</body>

— 매니쉬
소스

를 포함하여 Vendor_Module나를 위해 작동하지 않습니다. 잘 제거하십시오.

— Saravanan DS

@SaravananDS 패키지 및 모듈 이름으로 바꿔야합니다.

— Manish

예. 내 사용자 지정으로 바꾸면 Vendor_Module작동하지 않습니다.

— Saravanan DS

@Manish, 검색 결과 페이지에만 사용자 정의 CSS 파일을로드 할 수 있습니까?

— jafar pinjar

여기에서 child-theme을 사용할 필요가 없습니까?

— HaFiz Umer

헤드 섹션에서 magento 2가 CSS 끝에 넣을 미디어 속성을 추가 할 수 있습니다. 너비를 1px로 설정하면 모든 장치에서 너비가 활성화됩니다.

<head>
    <css src="css/homepage.css" media="all and (min-width: 1px)"/>
</head>

— 사이퍼 909
소스

고마워, 당신은 내 하루를 구했다. 나는 .less 파일로 작업하고 편집 할 때마다 컴파일하고 싶습니다.

— bourax

여기서 사용자 정의 테마를 먼저 만들 필요는 없습니까?

— HaFiz Umer

@HaFizUmer 먼저 사용자 정의 테마를 만들어야합니다. 허용 된 답변의 지침에 따라 여기에 표시된 방법을 사용하십시오.

— Cypher909