Bootstrap css conflict 방지를 위하여 less 사용하기

Tech Note 정보: 빅토르최 님이 작성하신 글입니다.; 카테고리: [ Java ]; 게시됨: 09 March 2016; 작성됨: 09 March 2016; 최종 변경: 20 August 2018; 조회수: 6128

1. 문제점

bootbox 사용을 위하여 bootstrap을 적용하였으나 bootstrap.css가 이전 css들과 충돌을 일으켰음. (html, body 등)

2. 해결방안

less를 통해 한정된 div에만 bootstrap.css를 적용하자.

3. less 설치

3-1. Windows 용 설치

우선 https://github.com/duncansmart/less.js-windows 에서 다운로드 한다.
less.js-windows-master.zip 파일이 받아진다.
lessc.cmd 파일을 실행하였는데 node.exe를 찾는다. PC에 node.js가 설치되어 있지 않기 때문이다.
그냥 Linux에서 직접 작업하기로 결정

3-2. Linux용 설치

먼저 node.js를 다운로드 한다.

$ wget https://nodejs.org/dist/v4.3.2/node-v4.3.2-linux-x64.tar.xz

xz 파일을 푼다.

$ xz -d node-v4.3.2-linux-x64.tar.xz

tar를 푼다.

$ tar -xvf node-v4.3.2-linux-x64.tar

node.js 디렉토리로 들어간다.

$ cd node-v4.3.2-linux-x64/bin

이제 드디어 less를 설치한다.

$ ./npm install less -g
 
/nodejs/node-v4.3.2-linux-x64/bin/lessc -> /nodejs/node-v4.3.2-linux-x64/lib/node_modules/less/bin/lessc
less@2.6.1 /nodejs/node-v4.3.2-linux-x64/lib/node_modules/less
tqq graceful-fs@4.1.3
tqq mime@1.3.4
tqq image-size@0.4.0
tqq source-map@0.5.3
tqq errno@0.1.4 (prr@0.0.0)
tqq mkdirp@0.5.1 (minimist@0.0.8)
tqq promise@7.1.1 (asap@2.0.3)
mqq request@2.69.0 (aws-sign2@0.6.0, forever-agent@0.6.1, tunnel-agent@0.4.2, oauth-sign@0.8.1, caseless@0.11.0, is-typedarray@1.0.0, stringstream@0.0.5, isstream@0.1.2, json-stringify-safe@5.0.1, extend@3.0.0, tough-cookie@2.2.1, node-uuid@1.4.7, qs@6.0.2, combined-stream@1.0.5, mime-types@2.1.10, form-data@1.0.0-rc3, hawk@3.1.3, aws4@1.3.2, bl@1.0.3, http-signature@1.1.1, har-validator@2.0.6)

설치된 파일을 확인해 보자.

$ ls -l
total 24060
lrwxrwxrwx 1 root root       34 Mar  8 17:07 lessc -> ../lib/node_modules/less/bin/lessc
-rwxrwxr-x 1  500  500 24637015 Mar  3 05:02 node
lrwxrwxrwx 1  500  500       38 Mar  8 17:06 npm -> ../lib/node_modules/npm/bin/npm-cli.js

lessc를 실행한다.

$ ./lessc
/usr/bin/env: node: No such file or directory

이런, node를 찾지 못한다. PATH에 걸려있지 않기 때문이다.

$ export PATH=$PATH:/nodejs/node-v4.3.2-linux-x64/bin

다시 lessc를 실행하면 잘 된다. 잘 되는 것은 확인을 했고, 이제는 bootstrap.css를 이용하여 새로운 css 파일을 컴파일해야 한다. 그러기 위해서는 다음과 같이 하나의 less 파일을 생성해야 하는데, prefix (bootstrap-iso) 작업을 수행하니까 prefix.less라고 이름을 지어보자. 그리고 새로 만들(컴파일할) 파일은 isolation을 위한 bootstrap.iso.css 파일이다.

.bootstrap-iso {
  @import (less) 'bootstrap.css';
}

이제 lessc를 통해 bootstrap-iso.css를 만들어낸다.

$ ./lessc prefix.less bootstrap.iso.css

참고로 bootstrap.min.css 파일을 이용하여 새로운 파일을 컴파일하려고 하면 문법 오류가 난다. min.css가 아닌 일반 css 파일을 이용하여 컴파일해야 한다. 여기까지 하면 less 작업은 모두 끝난 것이다. 다만 생성된 bootstrap.iso.css 파일에서 일부 문자열 수정이 필요하다.

".bootstrap-iso body" -> ".bootstrap-iso"
".bootstrap-iso html" -> ".bootstrap-iso"

그리고 bootstrap.iso.css 파일을 적용하고, bootstrap(bootbox)를 적용하려고 하는 곳에 <div class="bootstrap-iso"></div>로 wrap하면 된다.

4. less란?

CSS Preprocessor의 일종이다. CSS 작성 시 시간을 절약하고 실수를 줄이기 위해 사용한다.

ID 생성