zoukankan      html  css  js  c++  java
  • 在vue2.x中安装sass并配置

      在vue中安装sass先检查系统中有没有安装sass,在命令行中输入 sass -v

      

      表示sass在电脑中已有,否者可以参考我这篇博客安装Sass遇到的坑

    一、先安装sass

      cmd打开命令行,到项目的位置

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

      连续安装三个麻烦的话,来个快捷的方式

    npm install sass-loader node-sass vue-style-loader --D

     二、配置sass

     这个时候你打开build文件夹下面的webpack.base.config.js,如下修改

    module: {
        rules: [
          ...(config.dev.useEslint ? [createLintingRule()] : []),
          {
            test: /.vue$/,
            loader: 'vue-loader',
            options: vueLoaderConfig
          },
          {
            test: /.js$/,
            loader: 'babel-loader',
            include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
          },
          {
            test: /.(png|jpe?g|gif|svg)(?.*)?$/,
            loader: 'url-loader',
            options: {
              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]')
            }
          },
          { //上面的不修改,这是sass的配置
            test: /.scss$/,
            loaders: ['style', 'css', 'sass']
          }
        ]
      },

    三、sass应用用法

      在 .vue 的编程页面上,style上加 lang='scss'

      

      在引入sass文件是sass文件后缀为 .scss 如下

      

      

    
    

      

  • 相关阅读:
    js弹出DIV层
    .net 生成静态页面
    新开博客
    随机生成验证码
    ASP.NET错误处理方法总结
    webgis
    看樱花
    今天转载的笑话,挺好笑呵
    用Tomcat插件在Eclipse上搭建可跟踪调试的J2EE WEB开发环境
    关于JSTL的简单说明
  • 原文地址:https://www.cnblogs.com/aidixie/p/10316204.html
Copyright © 2011-2022 走看看