모든 Vue 구성 요소에서 CSS 프레임 워크를 자체 변수로 사용하십시오

Question

저는 VueJS과 Webpack이라는 새로운 세계에 상당히 익숙하므로 도움이 필요합니다.

나는 명령

vue init webpack my-project 

으로 콘솔을 통해 VueJS 및 Webpack를 설치 한이 후 나는이 디렉토리에 bulma CSS Framework를 설치했습니다.

npm install bulma 

와 나는 variables.scss 일부 bulma 변수를 무시했습니다. 내 App.vue의 스타일 섹션에서 두 파일을 모두 가져 오면 정상적으로 작동합니다.

내 App.vue은 다음과 같습니다

<template> 
    <div id="app"> 
    <top-navigation/> 
    <div class="has-text-centered"> 
     <img src="./assets/logo.png"> 
     <p>Test</p> 
     <router-view></router-view> 
    </div> 

    </div> 
</template> 

<script> 
    import TopNavigation from './components/shared/TopNavigation.vue' 

    export default { 
    name: 'app', 
    components: { 
     'top-navigation': TopNavigation 
    } 
    } 
</script> 

<style lang="scss"> 
    @import 'assets/scss/_variables.scss'; 
    @import '~bulma'; 

</style> 

내 TopNavigation.vue은 다음과 같습니다

<template> 
    <div> 
    <div class="blue-bg"> 
     <div class="container"> 
     <h2 class="title">Test</h2> 
     </div> 
    </div> 
    </div> 
</template> 

<script> 

    export default { 
    data() { 
     return { 
     msg: 'hello vue' 
     } 
    } 
    } 
</script> 

<style lang="scss"> 
    .blue-bg { 
    height: 80px; 
    background-color: $blue; 
    } 
</style> 

하지만 오류 얻을 :

error in ./src/components/shared/TopNavigation.vue

Module build failed: background-color: $blue;
Undefined variable: "$blue".

을

---

을 사용하고 내 TopNavigation에서 나는 오류가 발생하지 않는 지금

scss: generateLoaders(['css', 'sass?data=@import "./src/assets/scss/_variables.scss";@import "~bulma";']), 

과 :

나는 잠시 검색이처럼 내 webpackutils.js에 직접 파일을 파일을 가져올 시도했습니다 오른쪽 파란색. 하지만 이제 bulma-variable은 무시되지 않습니다.

여러분이 내 문제를 이해하고 누군가이 문제를 도와 주길 바랍니다.

Answer 1

bulma가 sass를 사용하기 때문에 scss를 사용할 수 있다고 생각하지 않습니다. 그냥에 TopNavigation.vue 스타일을 변경 :

<style lang="sass" scoped> 
    @import '~bulma/sass/utilities/variables.sass' 
    .blue-bg 
    height: 80px; 
    background-color: $blue; 
</style> 

그리고 나는이 트릭을 할해야한다고 생각.

Answer 2

당신이 나를 좋아하는 사람이라면 Webpack 등으로 인해 압도 당하지 않는 것이 좋습니다.

내가 지금 한 것은 bulma.css를 bulma 웹 사이트에서 다운로드하는 것입니다.

vue-cli를 사용하여 템플릿 프로젝트 구조를 만들어 보겠습니다. [다시 한번 webpack 마법을 무시했습니다. 사용 된 템플릿은 webpack-simple입니다.]

은 프로젝트 구조의 정적 폴더의 위치로 다운로드 CSS 파일을 추가하고 내 App.vue에서 그것을 참조

<style src="../static/bulma.css"> 

초점은 학습 고급 물건에 들어가 다음 배우고 개발하는 것입니다

빌드 도구 webpack 등.