zoukankan      html  css  js  c++  java
  • 在vue-cli中安装scss,且可以全局引入scss的步骤

    简历魔板__个人简历模板在线生成

    在写vue的css样式时,觉得需要css预处理器让自己的css更加简洁、适应性更强、可读性更佳,更易于代码的维护,于是在vue-cli脚手架采用scss。写过的人都知道,每写一个.vue文件都要在style上面@import global.scss文件的话,这样很麻烦。css文件可以在main.js中可以直接import,而scss文件import会报错,因此记录下处理的方法。

    步骤一: 安装node-sass、sass-loader、style-loader

        cnpm install node-sass --save-dev
        cnpm install sass-loader --save-dev
        cnpm install style-loader --save-dev    

    步骤二: 安装sass-resources-loader

        cnpm install sass-resources-loader --save-dev
    


    步骤三: 修改build中的utils.js

        scss: generateLoaders('sass')
    
        修改成:
    
        scss: generateLoaders('sass').concat(
          {
            loader: 'sass-resources-loader',
            options: {
              resources: path.resolve(__dirname, '../src/assets/global.scss')
            }
          }
        )
    

    可知,我是在assets中创建了一个global.scss文件。

    最后,在组件中的style标签添加lang="scss",就OK了。

    附上scss基础教程: https://www.sass.hk/guide/

  • 相关阅读:
    vue 定义全局函数和变量
    大学感受
    NOIP2018 游记
    NOI2018 游记
    THUSC 2018 游记
    APIO2018 游记
    SXOI2018游记
    poorpool 的 考场 NOI Linux 配置
    关于 poorpool
    NOIP2017 游记
  • 原文地址:https://www.cnblogs.com/wuzhendong/p/8078659.html
Copyright © 2011-2022 走看看