programing

웹 팩을 사용하여 스타일러스 파일을 전체적으로 가져오기

itsource 2022. 8. 8. 17:22
반응형

웹 팩을 사용하여 스타일러스 파일을 전체적으로 가져오기

vue2에서 "vue init webpack my-project"를 사용하여 새로운 프로젝트를 시작했습니다.스타일링에 스타일러스를 사용하고 있습니다.지금까지는 모든 걸 정리했어요

그러나 지금은 글로벌해야 할 별도의 파일 variables.styl을 원합니다.

즉, "@import"('variables)는 사용하지 않습니다.style''을 클릭합니다.2시간 동안 찾아봤지만 좋은 게 없어요.

이 투고를 위해 웹 팩 파일의 내용을 복사 붙여넣지 않습니다.그러나 다음 링크를 제공합니다.웹팩 파일이 포함된 프로젝트의 "빌드" 디렉토리를 클릭합니다.

명령어는 "node build/dev-server.js"입니다.

vue-cli < 3으로 작성된 vue 어플리케이션용입니다.

stylus-loader에 따르면, 당신은 통과시킴으로써 이것을 달성할 수 있다.variables.styl파일 경로를 통해 스타일러스로 이동합니다.import옵션, 새 폴더를 만드는 것이 좋습니다.styles내부src모든 글로벌 스타일러스 파일(예: 파일, 믹스인 등)을 포함하는 디렉토리를 선택한 다음 이 디렉토리 경로를 Import 옵션에 전달합니다.

  • build/util.js블록 전부터 블록하기 전에

    return {
        css: generateLoaders(),
        ...
    

    변수를 정의하다var stylesDir = path.resolve(__dirname, '../src/styles')이렇게 하면 나중에 수고를 덜 수 있을 거예요.

  • 이제 라는 행을 찾습니다.stylus: generateLoaders('stylus')그리고 이것을 패스한다.{import: [stylesDir+'/*.styl']}의 두 번째 논거로서generateLoaders기능.

    처럼 보여야 한다.stylus: generateLoaders('stylus', {import: [stylesDir+'/*.styl']})

언급URL : https://stackoverflow.com/questions/43677393/globally-import-stylus-file-with-webpack

반응형