vue 에서 css 를 미리 불 러 오기 위해 sass 를 사용 하 는 설정 방식 에 대한 자세 한 설명

1.sas 의존 패키지 설치

npm install --save-dev sass-loader

//sass-loader   node-sass
npm install --save-dev node-sass

2.build 폴 더 에 있 는 webpack.base.conf.js 의 rules 에 설정 을 추가 합 니 다.아래 빨간색 부분 입 니 다.

{ 
 test: /\.sass$/, 
 loaders: ['style', 'css', 'sass'] 
} 

<span style="color:#454545;">// module         
 module: {
  rules: [
   ...(config.dev.useEslint ? [createLintingRule()] : []),
   {
    test: /\.vue$/,
    //     ， .js .vue           ，         'eslint-loader'
    // enforce: 'pre'      ，eslint           ，       ，            ，       
    //  vue    vue-loader， loader vue          ，      .vue   
    loader: 'vue-loader',
    //  vueLoaderConfig       vue-loader,         css    
    options: vueLoaderConfig
   },
   {
    test: /\.js$/,
    //  js    babel-loader  ,        es6   
    loader: 'babel-loader',
    //   src test    js      loader
    include: [resolve('src'), resolve('test')]
   },
   {
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    //            url-loader   ，                     64  DataURL
    //            DataURL   ，        ，                     64  
    // DataURL，  src  ，            ，    ，    ？？
    loader: 'url-loader',
    options: {
     //    10000            DataURL
     limit: 10000,
     name: utils.assetsPath('img/[name].[hash:7].[ext]')
    }
   },
   {
    test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
    //       ，     
    loader: 'url-loader',
    options: {
     limit: 10000,
     name: utils.assetsPath('media/[name].[hash:7].[ext]')
    }
   },
   {
    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
    loader: 'url-loader',
    options: {
     limit: 10000,
     name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
    }
   },
    </span><span style="color:#ff0000;">{
      test: /\.sass$/,
      loaders: ['style', 'css', 'sass']
    }</span><span style="color:#454545;">
  ]
 },</span>

3.템 플 릿 안의 style lang="scss"를 수정 합 니 다.예 를 들 어 템 플 릿 빨간색 태그

<style lang="scss">

<template>
  <div id="indexContent">
    <v-header></v-header>
    <div class="tab">
      <div class="tab-item">
        <!--    router-link      . -->
        <!--      `to`       . -->
        <!-- <router-link>           `<a>`    -->
        <router-link to="/foods">  </router-link>
      </div>
      <div class="tab-item">
        <router-link to="/rating">  </router-link>
      </div>
      <div class="tab-item">
        <router-link to="/seller">  </router-link>
      </div>
    </div>
    <!--      -->
    <!--                -->
    <router-view></router-view>
  </div>
</template>
<script type="text/ecmascript-6">
  import header from './components/header/header.vue';
  //  default           
  export default{
    components: {
      'v-header': header
    }
  };
</script>
<span style="color:#cc0000;"><style lang="scss"></span>
  #indexContent {
    .tab{
      display: flex;
      width:100%;
      height: 40px;
      line-height: 40px;
      .tab-item {
        flex: 1;
        text-align: center;
        a{
          display:block;
        }
      }
    }
  }
</style>

4.npm run dev
5.효과

이상 의 이 편 은 vue 에서 css 를 미리 불 러 오고 sas 를 사용 하 는 설정 방식 을 바탕 으로 상세 하 게 설명 하 는 것 이 바로 작은 편집 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.여러분 께 참고 가 되 고 저희 도 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.