zoukankan      html  css  js  c++  java
  • vue-cli 3.0集成sass/scss到vue项目

    如果在创建项目没有选择CSS 预处理器,我们也可以手动安装sass-loader node-sass来集成scss。

    npm install -D sass-loader node-sass

    这时候安装完就可以在组件中使用scss了。

    <style scoped lang="scss">
    .wrap {
        h1{
            color:blue;
        }
    }
    </style>

    引入SCSS全局变量

    _variable.scss
    $color-theme:#498eff;

    如果想要使用scss变量的话,需要对配置文件做如下修改

    vue service clie会自动使用我们安装的sass-loader作为scss内容的加载器。vue cli是基于webpack构建项目,如果想对sass-loader传递一些配置项,可以在vue.config.js配置。在项目的根目录下如果没有找到vue.config.js,手动创建即可。如下:

    // vue.config.js
    const fs = require('fs')
    module.exports = {
      css: {
        loaderOptions: {
          sass: {
                prependData: `@import "~@/assets/scss/_variable.scss";`
                } 
    }
    }
    }

    这个文件variables.scss也是可以通过import在.vue组件里引入。

    修改完配置文件记得重启下项目,接下来就可以使用scss变量,函数等功能了。

    <style scoped lang="scss">
    .wrap {
        h1{
            color:$color-theme;
        }
    }
    </style>
  • 相关阅读:
    LeetCode
    LeetCode
    LeetCode
    LeetCode
    LeetCode
    LeetCode
    Python, pandas: how to sort dataframe by index// Merge two dataframes by index
    永久修改VS include目录
    <OFFER05> 05_ReplaceSpaces替换空格
    用二叉树进行排序 x (从小到大)
  • 原文地址:https://www.cnblogs.com/dekevin/p/12347749.html
Copyright © 2011-2022 走看看