그런트/스테로이드를 사용하여 Ionic SASS 구축

StackOverflow https://stackoverflow.com//questions/23038467

문제

다음을 사용하여 프로토타입 프로젝트를 구축하려고 합니다. 이온 그리고 앱가이버 스테로이드.Ionic에는 AngularJS를 기반으로 구축된 매우 훌륭한 UI 및 템플릿 세트가 있습니다.그리고 Steroids는 모바일 앱 테스트를 위한 몇 가지 멋진 도구를 제공합니다(로컬 테스트를 위해 내장된 웹 서버, 자동 배포, weinre 디버깅, 에뮬레이터 통합, 실제 장치에 배포하고 weinre를 사용하여 디버깅하기 위한 쉬운 워크플로).그래서 그것들을 합치는 것은 역대 가장 멋진 아이디어처럼 들렸습니다.

나는 용감한 시도를 했습니다(아래에 자세히 설명되어 있음). 이는 유망해 보입니다.그러나 Steroids 빌드 도구를 실행하면 Ionic의 SASS를 컴파일하려고 시도하고 많은 오류가 발생합니다.

세부....

방금 생성기 명령을 사용하여 스테로이드로 새로운 프로젝트를 시작했습니다.

steroids create myApp

그런 다음 다음을 사용하여 www/comments에 Ionic을 설치했습니다.

bower install driftyco/ionic-bower

그런 다음 다음 중 하나를 다운로드했습니다. Ionic 스타터 프로젝트 이를 스테로이드 샘플 코드와 수동으로 병합했습니다.Ionic 코드를 사용했지만 CSS 및 JS 포함을 www/comComponents로 리디렉션했습니다.그런 다음 샘플 스테로이드 코드의 포함 내용을 복사했습니다. steroids.js, onerror.js, console.log.js, cordova.js.또한 다양한 config.xml 파일을 복사했습니다.

어딘가에 샘플 코드를 업로드할 수 있지만 실제로 문제가 있는 것은 아니라고 생각합니다.그냥 배경지식을 좀 주는 게 좋겠다고 생각했어요.프랑켄슈타인의 괴물을 테스트하기 위해 다음을 실행했습니다.

steroids connect --serve

포트 4000에서 작은 웹 서버를 시작하고 브라우저에서 해당 링크를 엽니다.그러나 스테로이드 서버가 시작되면 SCSS 파일을 감지하고 컴파일을 시도합니다.Bower 패키지에 미리 빌드된 패키지가 포함되어 있으므로 실제로 컴파일할 필요는 없지만 일단 기본 사항이 작동하게 되면 SASS를 사용하여 앱 스타일을 지정하고 싶을 것입니다. 그러면 아무런 문제도 발생하지 않을 것입니다.

그러나 다음과 같은 오류가 발생합니다.

Running "steroids-compile-sass" task
SASS files found, attempting to compile them to dist/...

Running "sass:dist" (sass) task
Syntax error: Undefined mixin 'display-flex'.
        on line 8 of www/components/ionic/scss/_button-bar.scss, in `display-flex'
        from line 8 of www/components/ionic/scss/_button-bar.scss
  Use --trace for backtrace.

Syntax error: Undefined variable: "$checkbox-height".
        on line 10 of www/components/ionic/scss/_checkbox.scss
  Use --trace for backtrace.

Syntax error: Undefined variable: "$z-index-action-sheet".
        on line 27 of www/components/ionic/scss/_action-sheet.scss
  Use --trace for backtrace.

Syntax error: Undefined variable: "$line-height-base".
        on line 8 of www/components/ionic/scss/_form.scss
  Use --trace for backtrace.

Syntax error: Undefined mixin 'button-style'.
        on line 9 of www/components/ionic/scss/_button.scss, in `button-style'
        from line 9 of www/components/ionic/scss/_button.scss
  Use --trace for backtrace.

Syntax error: Undefined mixin 'translate3d'.
        on line 19 of www/components/ionic/scss/_animations.scss, in `translate3d'
        from line 19 of www/components/ionic/scss/_animations.scss
  Use --trace for backtrace.

File "dist/components/ionic/scss/_button-bar.css" created.
Warning:  Use --force to continue.

Aborted due to warnings.
Syntax error: Undefined mixin 'badge-style'.
        on line 8 of www/components/ionic/scss/_badge.scss, in `badge-style'
        from line 8 of www/components/ionic/scss/_badge.scss
  Use --trace for backtrace.

Syntax error: Undefined mixin 'display-flex'.
        on line 8 of www/components/ionic/scss/_bar.scss, in `display-flex'
        from line 8 of www/components/ionic/scss/_bar.scss
  Use --trace for backtrace.

따라서 정의되지 않은 모든 믹스인과 변수는 내 코드 베이스에 있습니다. www/components/ionic/_mixins.scss 그리고 www/components/ionic/_variables.scss 각기.두 가지 모두에 포함됩니다. www/components/ionic/ionic.scss.Ionic에서는 ionic.scss를 컴파일하고 모든 것을 올바른 순서(합리적)로 포함하도록 기대하는 것 같지만 스테로이드(사용 중인 것으로 보입니다) grunt-contrib-sass)는 디렉토리의 모든 SCSS 파일을 다른 순서로 컴파일하려고 합니다.

그렇다면 스테로이드를 구성하거나 grunt-contrib-sass 그냥 컴파일하기 ionic.scss?그렇다면 어떻게?이것이 실패하면 어떻게 스테로이드에서 SASS 컴파일을 비활성화할 수 있습니까?

도움이 되었습니까?

해결책

Ionic은 ionic.scss에서 모든 scss를 가져오므로 모두 제외했습니다. _*.scss 이 해킹으로 컴파일에서 \node_modules\grunt-steroids\tasks\steroids-compile-sass.coffee :

 ...files: [
            {
              expand: true
              cwd: 'app/'
              src: ['**/!(_*).scss', '**/!(_*).sass']
              dest: 'dist/'
              ext: '.css'
            }
            {
              expand: true
              cwd: 'www/'
              src: ['**/!(_*).scss', '**/!(_*).sass']
              dest: 'dist/'
              ext: '.css'
            }
          ]...

다른 팁

AppGyver의 Merituuli입니다.

Ionic을 설치한 방식이 불필요하게 복잡해 보이며 이로 인해 앱이 손상될 수 있습니다.정의되지 않은 믹스인에 대해 불평하는 Steroids 없이 Steroids 프로젝트 내에서 Ionic을 작동시키는 방법에 대한 지침은 다음과 같습니다.

  1. 스테로이드 프로젝트 만들기
  2. 다음에서 Ionic 프레임워크 CDN을 다운로드하세요. 여기
  3. Steroids 프로젝트 폴더로 이동하세요. www/vendor 예를 들어 "ionic"과 같은 새 폴더를 만듭니다.
  4. 압축을 푼 CDN에서 원하는 파일을 생성된 폴더에 복사하세요.
  5. 필요한 CSS/js 파일을 다음 위치에 포함하세요. application.js/application.css/각 HTML 파일

이것이 도움이 됩니까?

메시지를 본 후 command connect requires to be in a Steroids project directory 나는 무엇이 디렉토리를 스테로이드 프로젝트로 만드는지 궁금했습니다.그게 나를 다른 길로 이끌었어

  • 스테로이드 프로젝트에서 구성 디렉터리를 복사합니다.
  • ionic 프로젝트 디렉토리에 붙여넣으세요(다음이지만 www 디렉토리 내부는 아님)
  • 스테로이드 프로젝트에서 www/loading.html 파일을 복사하세요.
  • www/ 디렉토리(index.html 옆)에 붙여넣으세요.
  • 달리다 steroids connect

그러면 Gruntfile.js 및 package.json 파일 업데이트(일부 수동 개입이 필요할 수 있음)를 포함하여 프로젝트에서 오류가 있는지 확인하는 스테로이드 프로젝트 마이그레이션 스크립트가 시작됩니다. 이는 정말 훌륭합니다.

이렇게 간단하거나 마이그레이션 스크립트가 있을 거라고는 생각하지 못했습니다. AppGyver 팀에게 감사드립니다!

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top