zoukankan      html  css  js  c++  java
  • vue scss 安装

    1、开始在vue项目中使用sass,在命令行输入一下命令进行安装(使用git命令行要用shift+insert 进行粘贴否则粘贴不上)

    cnpm install node-sass --save-dev //安装node-sass 
    cnpm install sass-loader --save-dev //安装sass-loader
    cnpm install style-loader --save-dev //安装style-loader 有些人安装的是 vue-style-loader 其实是一样的!

    2. 这个时候你打开build文件夹下面的webpack.base.config.js
    把里面的module改成这样的

    module: { 
        rules: [
              {
                test: /.vue$/,
                loader: 'vue-loader',
                options: vueLoaderConfig
              },
              {
                test: /.js$/,
                loader: 'babel-loader',
                include: [resolve('src'),
                resolve('test')]
              },
              {
                 test: /.(png|jpe?g|gif|svg)(?.*)?$/,
                 loader: 'url-loader',
                 options: {
                    limit: 10000,
                    name: utils.assetsPath('img/[name].[hash:7].[ext]')
    }
    },
              {
    test: /.(woff2?|eot|ttf|otf)(?.*)?$/,
    loader: 'url-loader',
    options: {
    limit: 10000,
    name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
    }
    },
              { //添加下面这段代码
    test: /.scss$/,
    loaders: ["style", "css", "sass"]
    }
    ]
    }
    3.在需要用到sass的地方添加lang=scss

    <style lang="scss" scoped="" type="text/css"> 
    //你的sass语言 $primary-color: #333;
    body {
    color: $primary-color; //编译后就成了 color:#333;类似于js的变量!
    }
    </style>
  • 相关阅读:
    IE浏览器请求数据是提示下载的问题
    jS清除浏览器缓存
    JS获取时间戳
    keycode
    JS简单解决并发量
    写移动端流氓方法,无意看到,分享下
    CSS中的rem的换算
    jsp会话监听
    jsonp在jsp中的使用
    Java中的位运算符
  • 原文地址:https://www.cnblogs.com/whlBooK/p/10579839.html
Copyright © 2011-2022 走看看