Node.js와 LESS의 완벽한 조화

LESS는 CSS를 작성하는 좋은 방법으로, 변수, 중첩 규칙, 믹스인 및 CSS 코드를 더 잘 구성하는 데 도움이 되는 기타 유용한 기능을 사용할 수 있습니다.
저는 최근 Node.js를 공부하고 있는데 애플리케이션에서 LESS를 쉽게 사용할 수 있도록 less-middleware 미들웨어를 사용하고 싶었습니다. 구성 후 LESS-Middleware는 자동으로 LESS 코드를 CSS 코드로 컴파일할 수 있습니다.

LESS와 CSS 파일을 같은 디렉토리에 저장하면 구성은 간단하지만 소스 디렉토리와 대상 디렉토리에 서로 다른 경로를 사용하고 싶은데 여기서 약간의 문제가 있으니 여기서는, 나는 내가 발견한 문제를 문서화하겠다고 생각했습니다.
다른 "src" 및 "dest" 디렉터리를 지정하는 경우 "prefix" 옵션도 제공해야 합니다. 이 옵션은 대상 디렉터리 다음의 디렉터리와 일치해야 합니다. 다음은 이해를 돕기 위한 예입니다.

var  lessMiddleware = require("less-middleware");
app.use(lessMiddleware({
    src: __dirname + "/less",
    dest: __dirname + "/public/css",
    prefix: "/css",
    force: true
}));
app.use(express.static(__dirname + "/public"));

이 예에서는 소스 디렉토리를 애플리케이션 루트 디렉토리 아래의 "/less" 디렉토리로 구성하고 CSS가 다음으로 출력되도록 합니다. 또한 "/public" 다음 디렉터리, 즉 "/css" 디렉터리와 일치하도록 "prefix" 속성을 지정해야 합니다.
다른 항목도 지정할 수 있습니다. 매개변수, 위에 지정된 force 매개변수는 LESS 파일이 요청될 때마다 다시 컴파일되도록 하고 자동 새로 고침 기능과 결합되어 개발 중 스타일 코드를 수정하면 즉각적인 효과를 얻을 수 있습니다.
마지막으로, 페이지에 CSS 파일이 인용되어 있습니다.

<link rel="stylesheet", type="text/css", href="css/styles.css">

이 글이 게시되었을 때 less-middleware가 버전 1.0.3으로 업데이트되었습니다. 위 구성은 0.1.x용입니다. 0.1.x에서 1.0.x로 마이그레이션을 시작하는 방법을 소개합니다.
우선 중요한 변경 사항이 있습니다. 이전에 옵션 매개변수에 있던 소스 디렉터리 매개변수가 다음과 같이 변경되었습니다.

lessMiddleware({
  src: path.join(__dirname, '/public')
})

소스 디렉터리이기 때문에 필수 파라미터이므로 업그레이드 후 미들웨어의 첫 번째 파라미터로 사용하게 됩니다.

lessMiddleware(path.join(__dirname, '/public'))

두 번째 변경 사항은 미들웨어 매개변수와 LESS 매개변수를 분리하여 다음과 같이 매개변수 구조를 보다 명확하게 한 것입니다. ：

lessMiddleware(source, [{options}], [{parserOptions}], [{compilerOptions}])

options 매개변수는 미들웨어에 제공되며 후자의 두 매개변수 객체는 미들웨어에 영향을 주지 않으며 LESS 구문 분석 및 컴파일러로 전달됩니다.
이 조정 후에는 해당 매개변수 정의 방법도 그에 따라 조정되어야 합니다.

압축: 제거됨 옵션은 컴파일러 옵션에서 정의되어야 합니다.
dumpLineNumbers: 옵션에서 제거되고, 컴파일러 옵션에서 정의되어야 합니다.
최적화: 옵션에서 제거되고, 파서 옵션에서 정의되어야 합니다.
경로: 제거됨; 옵션은 parserOptions에서 정의해야 합니다.
전처리기: 정의를 위해 preprocessor.less로 이동했습니다.
relativeUrls: 옵션에서 제거되었으며, parserOptions에서 정의해야 합니다.
sourceMap: 옵션에서 제거되었습니다. 컴파일러옵션에서 정의됨;
yuicompress: 옵션에서 제거됨, 컴파일러 옵션에서 정의되어야 함;
세 번째 변경 사항은 새 매개변수가 추가되고 접두사 및 treeFunctions 매개변수가 제거되어 이를 구성할 수 있다는 것입니다. 다음과 같이 보다 유연하게:
postprocess.css: 저장하기 전에 CSS 컴파일 출력을 수정합니다.
preprocess.less: 구문 분석 및 컴파일하기 전에 LESS를 수정합니다.
preprocess.path: 저장하기 전에 LESS 경로를 수정합니다.
이러한 매개변수를 사용하여 함수를 사용하여 다음과 같은 효과를 얻을 수 있기 전에 이를 달성했습니다.

preprocess: {
  path: function(pathname, req) {
    return pathname.replace(/^\/less\//, '/css');
  }
}

위 내용은 Node.js와 LESS의 완벽한 조화의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!