vue에서 CSS 프리로딩을 기반으로 sass를 사용한 구성 방법에 대한 자세한 설명-JS 튜토리얼-php.cn

vue에서 CSS 프리로딩을 기반으로 sass를 사용한 구성 방법에 대한 자세한 설명

亚连

풀어 주다： 2018-05-30 16:28:16

원래의

1744명이 탐색했습니다.

아래에서는 vue에서 CSS 프리로딩을 기반으로 sass를 사용하여 구성하는 방법에 대해 자세히 설명하겠습니다. 좋은 참고 가치가 있으며 모든 분들께 도움이 되기를 바랍니다.

1. sass 종속성 패키지

npm install --save-dev sass-loader

로그인 후 복사

//sass-loader依赖于node-sass
npm install --save-dev node-sass

로그인 후 복사

2에 표시된 대로 webpack.base.conf.js 규칙에 구성을 추가합니다. 빨간색 부분

{ 
 test: /\.sass$/, 
 loaders: [&#39;style&#39;, &#39;css&#39;, &#39;sass&#39;] 
}

로그인 후 복사

<span style="color:#454545;">// module用来解析不同的模块
 module: {
  rules: [
   ...(config.dev.useEslint ? [createLintingRule()] : []),
   {
    test: /\.vue$/,
    // 也就是说，对.js和.vue文件在编译之前进行检测，检查有没有语法错误&#39;eslint-loader&#39;
    // enforce: &#39;pre&#39;选项可以确保，eslint插件能够在编译之前检测，如果不添加此项，就要把这个配置项放到末尾，确保第一个执行
    // 对vue文件使用vue-loader，该loader是vue单文件组件的实现核心，专门用来解析.vue文件的
    loader: &#39;vue-loader&#39;,
    // 将vueLoaderConfig当做参数传递给vue-loader,就可以解析文件中的css相关文件
    options: vueLoaderConfig
   },
   {
    test: /\.js$/,
    // 对js文件使用babel-loader转码,该插件是用来解析es6等代码
    loader: &#39;babel-loader&#39;,
    // 指明src和test目录下的js文件要使用该loader
    include: [resolve(&#39;src&#39;), resolve(&#39;test&#39;)]
   },
   {
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    // 对图片相关的文件使用 url-loader 插件，这个插件的作用是将一个足够小的文件生成一个64位的DataURL
    // 可能有些老铁还不知道 DataURL 是啥，当一个图片足够小，为了避免单独请求可以把图片的二进制代码变成64位的
    // DataURL，使用src加载，也就是把图片当成一串代码，避免请求，神不神奇？？
    loader: &#39;url-loader&#39;,
    options: {
     // 限制 10000 个字节一下的图片才使用DataURL
     limit: 10000,
     name: utils.assetsPath(&#39;img/[name].[hash:7].[ext]&#39;)
    }
   },
   {
    test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
    // 字体文件处理，和上面一样
    loader: &#39;url-loader&#39;,
    options: {
     limit: 10000,
     name: utils.assetsPath(&#39;media/[name].[hash:7].[ext]&#39;)
    }
   },
   {
    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
    loader: &#39;url-loader&#39;,
    options: {
     limit: 10000,
     name: utils.assetsPath(&#39;fonts/[name].[hash:7].[ext]&#39;)
    }
   },
    </span><span style="color:#ff0000;">{
      test: /\.sass$/,
      loaders: [&#39;style&#39;, &#39;css&#39;, &#39;sass&#39;]
    }</span><span style="color:#454545;">
  ]
 },</span>

로그인 후 복사

3 템플릿에서 스타일 lang="scss"를 수정합니다(예: 템플릿 빨간색 mark

<style lang="scss">

로그인 후 복사



<style lang="scss">
  #indexContent {
    .tab{
      display: flex;
      width:100%;
      height: 40px;
      line-height: 40px;
      .tab-item {
        flex: 1;
        text-align: center;
        a{
          display:block;
        }
      }
    }
  }

로그인 후 복사

4.npm run dev

5.Effect

위 내용은 앞으로 모든 사람에게 도움이 되기를 바랍니다.