Nuxt.JS에서 style-resources-module을 사용하는 방법은 무엇입니까?
5243 단어 nuxtwebdevjavascript
설치
CSS 전처리기를 설치하지 않은 경우 CSS 전처리기 종속성을 추가하십시오.
yarn add sass-loader node-sass
yarn add less-loader less
yarn add stylus-loader stylus
style-resources-module 패키지를 추가합니다.
yarn add @nuxtjs/style-resources
@nuxtjs/style-resources 패키지를 프로젝트에 빌드 모듈로 추가합니다.
export default {
buildModules: [
'@nuxtjs/style-resources',
],
styleResources: {
// your settings here
sass: [],
scss: [],
less: [],
stylus: []
}
}
용법
SCSS를 예로 들어 설명하겠습니다. 그러나 Less, Sass 또는 Stylus와 같은 다른 프로세서를 자유롭게 사용할 수 있습니다. 다음 예제와 같이 nuxt.config.js 파일에 믹스인 또는 초록을 추가해야 합니다.
// nuxt.config.js
export default {
buildModules: ['@nuxtjs/style-resources'],
styleResources: {
scss: [
'./assets/vars/*.scss',
'./assets/abstracts/_mixin.scss'
]
}
}
// assets/vars/colors.scss
$primary: #5eb8ee;
$secondary: #06af13;
// assets/abstracts/_mixin.scss
@mixin bp($point) {
@if $point == mobile {
@media (max-width: 576px) {
@content;
}
}
}
완료한 후에는 모든 구성 요소에서 믹스인 및 변수를 사용할 수 있습니다.
components/Box.vue
<template>
<div class="box"></div>
</template>
<style lang="scss" scoped>
.box {
color: $secondary;
@include bp(mobile) {
background: $primary;
}
}
</style>
참고: 실제 스타일을 가져오지 마십시오. 이 모듈은 실제 빌드에 존재하지 않을 변수, 믹스인, 함수(등)를 가져올 때만 사용하십시오. 실제 스타일을 가져오면 모든 구성 요소에 포함되고 빌드/HMR 크기가 느려집니다. 이러지 마!
Github: style-resources-module
그게 다야 읽어 주셔서 감사합니다.
Reference
이 문제에 관하여(Nuxt.JS에서 style-resources-module을 사용하는 방법은 무엇입니까?), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/fdemir/how-to-use-style-resources-module-in-nuxt-js-90l텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)