vue2项目使用sass的示例代码

1，使用save会在package.json中自动添加。

npm install node-sass --save-dev

npm install sass-loader --save-dev

注：

通常使用npm安装会出现以下报错，安装失败。（网路问题）

可以通过淘宝的npm镜像安装node-sass，解决以上问题。

$ npm install -g cnpm --registry=https://registry.npm.taobao.org （安装淘宝镜像）

$ cnpm install node-sass --save （使用淘宝镜像安装node-sass）

2.进入webpack.base.config.js 配置scss   module -- loaders (vue1.0)

$ npm install --save-dev sass-loader style-loader css-loader
{

 test: /\.vue$/,

 loader: 'vue-loader',

 options: {

  loaders: {

  'scss': 'style-loader!css-loader!sass-loader'

  }

 }

 }

打开webpack.base.config.js在loaders里面加上  module -- rules (vue2.0)

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',

  query: {

   limit: 10000,

   name: utils.assetsPath('img/[name].[hash:7].[ext]')

  }

  },

  {

  test: /\.scss$/,

  loaders: ["style", "css", "sass"]

  },

  {

  test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,

  loader: 'url-loader',

  query: {

   limit: 10000,

   name: utils.assetsPath('fonts/[name].[hash:7].[ext]')

  }

  }

 ]

 }

3.如果需要在vue文件style标签使用scss的话，需要声明一下：

vue1.0

<style rel="stylesheet/scss" lang="scss"></style>

vue2.0

<style lang="scss" scoped="" type="text/css"></style>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解如何在vue中使用sass

    创建一个基于 webpack 模板的新项目 全局安装 vue-cli $ npm install --global vue-cli 创建一个基于 webpack 模板的新项目 $ vue init webpack my-project 安装依赖 $ cd my-project $ npm install 为了使用sass,我们需要安装sass的依赖包 npm install --save-dev sass-loader //sass-loader依赖于node-sass npm install

  • 浅谈sass在vue注意的地方

    浅谈sass在vue注意的地方

    当用@import导入vue页面的时候,在sass/scss文件里面的url,路径开始就是导入的vue位置. 当前目录结构 App.vue 我在App.vue导入了public.scss,那在public.scss里面的路径就要这样写 public.scss 等价于直接在App.vue页面写. 所以要注意导入时,样式的路径. 以上这篇浅谈sass在vue注意的地方就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • vue2项目使用sass的示例代码

    vue2项目使用sass的示例代码

    1,使用save会在package.json中自动添加. npm install node-sass --save-dev npm install sass-loader --save-dev 注: 通常使用npm安装会出现以下报错,安装失败.(网路问题) 可以通过淘宝的npm镜像安装node-sass,解决以上问题. $ npm install -g cnpm --registry=https://registry.npm.taobao.org (安装淘宝镜像) $ cnpm install

  • Vue项目中ESlint规范示例代码

    前言 eslint是一种代码风格管理的工具,可以制定一些代码编写规范,在vue项目中经常用到,本文就给大家分享了开发项目中使用的eslint校验规范,供参考: 示例代码 module.exports = { root: true, parserOptions: { parser: 'babel-eslint', sourceType: 'module' }, env: { browser: true, node: true, es6: true, }, extends: ['plugin:vue

  • 使用Bootstrap4 + Vue2实现分页查询的示例代码

    使用Bootstrap4 + Vue2实现分页查询的示例代码

    写在前面 工程为前后端分离设计,使用Nginx为前端资源服务器,同时实现后台服务的反向代理.后台为Java Web工程,使用Tomcat部署服务. 前端框架:Bootstrap4,Vue.js2 后台框架:spring boot,spring data JPA 开发工具:IntelliJ IDEA,Maven 实现效果: 会员信息 如何使用Bootstrap+Vue来实现动态table,数据的新增删除等操作,请查看使用Bootstrap + Vue.js实现表格的动态展示.新增和删除.交代完毕,

  • nodemon实现Typescript项目热更新的示例代码

    我们都知道nodemon可以直接用来在开发环境下运行js文件,可以在文件改变时自动刷新和重启服务器.但是最近刚好在学typescript,所以就想使用ts来写,也想达到同样的效果,总结一下方法,大概有如下几种: nodemon+tsc: 这个方法很简单,首先通过tsc将我们的ts文件编译到dist目录下,然后再通过nodemon直接运行dist目录下的文件即可.至于ts的输出目录相关配置可在tsconfig.js中设置. tsc && nodemon --watch dist/index.

  • JavaWeb项目FullCalendar日历插件使用的示例代码

    JavaWeb项目FullCalendar日历插件使用的示例代码

    本文介绍了JavaWeb项目FullCalendar日历插件使用的示例代码,分享给大家,具体如下: 使用FullCalendar需要引用的文件 1.css文件 2.js文件 <link href="${base}/assets/global/plugins/fullcalendar/fullcalendar.min.css" rel="external nofollow" rel="stylesheet" type="text/c

  • Docker 部署 SpringBoot 项目整合 Redis 镜像做访问计数示例代码

    Docker 部署 SpringBoot 项目整合 Redis 镜像做访问计数示例代码

    最终效果如下 大概就几个步骤 1.安装 Docker CE 2.运行 Redis 镜像 3.Java 环境准备 4.项目准备 5.编写 Dockerfile 6.发布项目 7.测试服务 环境准备 系统:Ubuntu 17.04 x64 Docker 17.12.0-ce IP:45.32.31.101 一.安装 Docker CE 国内不建议使用:"脚本进行安装",会下载安装很慢,使用步骤 1 安装,看下面的链接:常规安装方式 1.常规安装方式 Ubuntu 17.04 x64 安装

  • vue2.0自定义指令示例代码详解

    1.什么是指令? 指令通常以"v-"作为前缀, 以方便Vue知道你在使用一种特殊的标记. 除了 Vue 核心携带着的一些默认指令(v-model 和 v-show)之外, Vue 还允许你注册自己的自定义指令.某些情况下,还是需要对普通元素进行一些底层 DOM 访问, 这也是自定义指令仍然有其使用场景之处. 2.全局指令: 当页面加载时,元素将获取焦点,事实上,在访问页面时,如果你还没有点击任何地方,上面的输入框现在应该处于获取焦点的状态.现在让我们构建指令以完成此效果: <te

  • vue2.0使用swiper组件实现轮播的示例代码

    1.安装swiper npm install swiper@3.4.1 --save-dev 2.引用组件 import Swiper from 'swiper'; import 'swiper/dist/css/swiper.min.css'; 3.html页面代码 <div class="swiper-container" id="swiper"> <div class="swiper-wrapper"> <di

  • Java中Maven项目导出jar包配置的示例代码

    具体代码如下所示: <!-- 第一种打包方式 (maven-jar-plugin), 将依赖包和配置文件放到jar包外 --> <build> <sourceDirectory>src/main/java</sourceDirectory> <resources> <resource> <directory>src/main/resources</directory> <!-- 将<director

  • IDEA 中创建Spring Data Jpa 项目的示例代码

    一.IDEA 创建工程 使用IDEA 创建工程的过程,使用文字做简单描述. 选择工程类别[Spring Initializr]. 设置工程的元数据[Metadata],根据自己的情况填写即可. 设置工程的依赖:在[Web]中选择"Spring Web";在[SQL]中选中"Spring Data JPA"."Spring Data JDBC"."MySQL Driver"."JDBC API".选中的可能有

随机推荐