vue2项目使用sass的示例代码
作者：每天都要进步一点点 发布时间：2024-04-26 17:39:16
标签：vue,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>
来源：http://www.cnblogs.com/crazycode2/p/6535105.html
0
投稿猜你喜欢
- 首先说下，由于最新的 0.8 版还是开发版本，因此我使用的是 0.79 版，API 也许会有些不同。因为我是搭配 MySQL InnoDB
本文实例为大家分享了Vue实现web分页组件的具体代码，供大家参考，具体内容如下效果演示源代码<!DOCTYPE html>&l- 1.0 创建存储过程和函数创建存储过程和函数就是将经常使用的一组 SQL 语句组合在一起，并将这些 SQL 语句当作一个整体存储
- 本文实例讲述了mysql简单实现查询结果添加序列号的方法。分享给大家供大家参考，具体如下：第一种方法：select (@i:=@i+1) a
- 实例如下：//判断时间是否过期function judgeTime(time){var strtime = time.replace(&qu
- 本例子程序展示了长白山火山气体地球化学2002年观测数据中CO2和He两种气体元素深度的时间序列。程序中用到了常用的时间序列python数据
- ASP链接MSSQL2005的链接字符串如下：Provider=SQLNCLI;Server=.\SQLEXPRESS;Database=m
- Git 基本操作Git 的工作就是创建和保存你项目的快照及与之后的快照进行对比。本章将对有关创建与提交你的项目快照的命令作介绍。获取与创建项
- 一、浏览器允许每个域名所包含的 cookie 数：Microsoft 指出 Internet Explorer 8 增加 cookie 限制
- 原文： gradio.app/interface-s…1.全局状态例子来解释import gradio as grsc
- 一、Map是什么？map是一堆键值对的未排序集合，类似Python中字典的概念，它的格式为map[keyType]valueType，是一个
- 我之前想写路由器的密码暴力破解器，我手上只有极路由，发现极路由有安全限制，只能允许连续10密码错误，所以我改拿博客园练手。博客园的博客有个功
- Python序列化的概念很简单。内存里面有一个数据结构，你希望将它保存下来，重用，或者发送给其他人。你会怎么做？这取决于你想要怎么保存，怎么
- 正文本文简要介绍Python自然语言处理(NLP)，使用Python的NLTK库。NLTK是Python的自然语言处理工具包，在NLP领域中
- 在进入一个页面的时候，一般在获取数据的同时，会先显示一个 loading ，等请求结束再隐藏 loading 渲染页面，只需要用一个属性去记
- 今天研究了些取access数据库随机记录问题，这是这我自己搜集整理的方法。大家有没有高见，可以告诉我，或者我总结的东东本身有误，也可以帮我修
- 下面我先给出了一小段代码示例，思考一下，为什么name，my_name 不会有波浪线，而 myname 和 wangbm 会有波浪线呢？Py
- 数据库配置1.安装数据库：自行安装 我的SQL Server版本为2019 2.登录数
- 阅读上一篇：你是真正的用户体验设计者吗? Ⅱ系统和用户环境设计苹果系统成功在于系统架构。简化系统本身，设备只能变得更好、更小、性能更强大。在
- 下面的代码中python2与python3的print使用区别，大家注意一下。python3需要加()才行。语法：for循环的语法格式如下：
