FuelPHP에서 LESS 사용

7414 단어 FuelPHP

Bootstrap은 역시 HTML의 기술량이 많기 때문에 지금 화제의 Less화해 버리려는 시도.
개발 환경에서만 컴파일을 실시해, 공개시에는 컴파일 끝난 파일을 참조하도록 해도 본다.

Package 설치

git clone --recursive git://github.com/kriansa/fuel-less.git fuel/packages/less

fuel/app/config/development/config.php

'auto_load' => array(
    'packages'  => array(
        'less',
    )
)

컴파일 환경 확인

CentOS6이라면 이 근처에 넣어 둘 필요가 있을지도

sudo yum install gcc gcc-c++ ld-linux.so.2 libstdc++.so.6

설정 변경

cp fuel/packages/less/config/less.php fuel/app/config/
cp fuel/packages/less/config/less.php fuel/app/config/development/

fuel/app/config/less.php

<?php
return array(
/*  'less_source_dir' => APPPATH.'assets/less/', //元ファイル格納用
    'less_output_dir' => DOCROOT.'assets/css/', //公開用コンパイル済みファイル格納用
    'less_compiler' => 'Less\\Compiler_Node',
    //'less_compiler' => 'Less\\Compiler_Lessphp',*/
);

fuel/app/config/development/less.php

<?php
return array(
    'less_source_dir' => APPPATH.'assets/less/', //元ファイル格納用
    'less_output_dir' => DOCROOT.'assets/css/', //公開用コンパイル済みファイル格納用
    'less_compiler' => 'Less\\Compiler_Node',
    //'less_compiler' => 'Less\\Compiler_Lessphp',
);

Bootstrap 준비

Github에서 프로젝트를 다운로드하고 less 폴더 만 이름을 바꾸고 저장

htps : // 기주 b. 코 m / twbs / 보오 tst 등 p

다운로드 한 less 폴더를 bootstrap으로 이름을 바꾸고 저장

pushd ~/
git clone https://github.com/twbs/bootstrap.git
mkdir fuel/app/assets/less -p
cp bootstrap/less fuel/app/assets/less/bootstrap -r
popd

개발 환경만 컴파일을 실행하도록 설정

touch fuel/app/config/event.php

fuel/app/config/event.php

return array(
    'fuelphp' => array(
        'controller_started' => function()
        {
            if( Fuel::$env == Fuel::DEVELOPMENT ){
                //compile less
                $css = Asset::less('style.less'); 
            }
        },
    ),
);

테스트

출처

fuel/app/assets/less/style.less

@import "bootstrap/bootstrap.less";

h1{
    .text-success;
}
h1{
    .glyphicon;
    .glyphicon-ok;
}
h1:before{
    margin-right:5px;
}
p{
    .text-warning;
}

fuel/app/views/template.php

<html>
<head>
<?php echo Asset::css('style.css'); ?>
</head>
<body>
<div class="container-fluid">
    <div class="row">
    <div class="col-md-8">
        <h1>success</h1>
        <p>warning</p>
        <?php /*echo $content;*/ ?>
    </div>
    </div>
</div>
</body>
</html>

결과

좋은 느낌!

Reference

이 문제에 관하여(FuelPHP에서 LESS 사용), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/goosys/items/687c4811bc36c33dd775

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

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

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다