vue 项目 使用sass以及注意事项

1,安装依赖:

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)

注:安装淘宝镜像后,仍无法安装node-sass的情况,执行下列命令

$ npm install --save node-sass --registry=https://registry.npm.taobao.org --disturl=https://npm.taobao.org/dist --sass-binary-site=http://npm.taobao.org/mirrors/node-sass

说明:

 
--registry=https://registry.npm.taobao.org 淘宝npm包镜像
 
--disturl=https://npm.taobao.org/dist 淘宝node源码镜像,一些二进制包编译时用
 
--sass-binary-site=http://npm.taobao.org/mirrors/node-sass 这个才是node-sass镜像
 
2,进入webpack.base.config.js 配置scss:
如下图:

如上添加配置scss:

{
test: /\.scss$/,
loaders: ["style", "css", "sass"]
}

3,如何引用外部的scss文件。

如有不足之处,请多多指教!!!github项目地址:https://github.com/whiskyma

vue 项目 使用sass以及注意事项的更多相关文章

  1. Vue项目引入sass

    最近两天手头的事情暂时搞完了,可以抽出空来学习一下东西,之前项目都是鹏哥搭建好了,我们在直接在里面写代码,sass语法用来写样式还是比较方便常用的,今天就来试试怎么引入和配置sass 参考文章:Vue ...

  2. vue项目安装sass/scss

    vue 添加scss 安装好之后使用: 注意scss和sass的语法区别,scss是用传统花括号,sass是缩进控制,看个人习惯选择语言 sass语法看这里==>sass基本语法 vue项目编译 ...

  3. 【前端vue开发】vue项目使用sass less扩展语言所要安装的依赖

    1.创建一个基于 webpack 模板的新项目 $ vue init webpack myvue 2.在当前目录下,安装依赖 $ cd myvue $ npm install 3.安装sass的依赖包 ...

  4. Vue项目中sass语法该怎么用?

    最近开始着手Vue框架,被各种报错蹂躏,其中有一个就是sass语法,<style>标签中添加<style lang="scss">,发现报错,在网上找了一些 ...

  5. vue 项目 使用sass,node-sass 安装方法及cnpm下如何安装node sass

    内容为转载,方便用时查阅,原文地址: https://www.cnblogs.com/crazycode2/p/6535105.html 1,使用save会在package.json中自动添加. 1 ...

  6. vue 项目 使用sass

    1,使用save会在package.json中自动添加. npm install node-sass --save-dev npm install sass-loader --save-dev 注: ...

  7. vue项目安装sass步骤等遇到的问题

    1.安装sass依赖包 npm install --save-dev sass-loader 注释(可能会出现问题:sass-loader版本过高导致,可以将其package.json中的版本改为7. ...

  8. vue 项目安装sass的依赖包

    安装sass的依赖包 npm install --save-dev sass-loader //sass-loader依赖于node-sass npm install --save-dev node- ...

  9. vue 项目配置sass

    1.运行npm install node-sass --save-dev npm install sass-loader --save-dev 2.打开build文件夹下面的webpack.base. ...

随机推荐

  1. DRDA

    在谈到分布式DB2数据时,有必要谈谈DRDA. DRDA代表分布式关系数据库体系结构. 它是由IBM开发的一种体系结构,它使关系数据能够在多个平台之间分布. 平台和平台都可以相互通信. 例如,一个DB ...

  2. Python查看模块函数,查看函数方法的详细信息

    Python查看方法的详情 1.通用的帮助函数help() 使用help()函数来查看函数的帮助信息. 如: import requests help(requests) 会有类似如下输出: 2.查询 ...

  3. Spark(二)算子详解

    目录 Spark(二)算子讲解 一.wordcountcount 二.编程模型 三.RDD数据集和算子的使用 Spark(二)算子讲解 @ 一.wordcountcount 基于上次的wordcoun ...

  4. 个人作业-Alpha项目测试—luomei1547

    这个作业属于哪个课程 https://edu.cnblogs.com/campus/xnsy/SoftwareEngineeringClass1/ 这个作业要求在哪里 https://edu.cnbl ...

  5. linux tar打包压缩排除某个目录或文件

    用tar打包时想剔除打包目录中的某个子目录或文件: 比如你想打包/home这个目录,但是/home/afish/目录和/home/www/afish.php文件你都不想打包,方法是: tar -zcv ...

  6. 【简易DFS/BFS+标记搜索次序的数组】zznu-2025 : 简单环路

    2025 : 简单环路 时间限制:1 Sec 内存限制:128 MiB提交:145 答案正确:41 提交 状态 编辑 讨论区 题目描述 有一个N x M 大小的地图,地图中的每个单元包含一个大写字母. ...

  7. window程序意外关闭自动重启脚本实现

    @echo off : tasklist|find /i "xxxx"||start yyyy ping/n 127.1>nul 新建 .bat 文件,将其写入文件 xxxx ...

  8. linux bash环境变量简单总结

    来源链接:http://www.178linux.com/8005 原创文章,如有转载,请注明原文地址 一.环境变量简介 Linux是一个多用户的操作系统.每个用户登录系统后,都会有一个专用的运行环境 ...

  9. IP选项处理

    1:引言 I P输入函数(i p i n t r)将在验证分组格式(检验和,长度等)之后,确定分组 是否到达目的地之前,对选项进行处理.这表明,分组所遇到的每个路由器以及最终的目的主机都要对分组的选项 ...

  10. ASP.NET MVC Liu_Cabbage 个人博客

    RightControl_Blog 介绍 前台使用燕十三博客前端模板,后台基于RightControl .NET通用角色权限管理系统搭建,已完成.项目地址:http://www.baocaige.to ...