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
投稿猜你喜欢
前言离过年还有十多天，在这里提前祝各位小伙伴新年快乐呀~先说句题外话：疫情还是比较严峻，各位小伙伴要是出门的话一定要做好防护措施呀，不出门的- asp连接mysql的问题ASP连接Mysql数据库的问题。下了一个MySql 的ODBC驱动。做了个小测试。顺利通过。先记录下来，中间还有
- 上个周末去书店时碰巧看到了AS3 CookeBook，我记得在apollo的alpha版快出来的时候，7yue就推荐过这个小册子，只不过我已
- 本文实例讲述了JS实现仿Windows经典风格的选项卡Tab切换代码。分享给大家供大家参考，具体如下：这款仿Windows风格的选项卡，带有
- 前言在前面的分享中，我们制作了一个天眼查 GUI 程序，今天我们在这个的基础上，继续开发新的功能，微博抓取工具，先来看下最终的效果整体的界面
- 品牌是我们一直挂在嘴边的词语，视觉设计师们经常说到，公司的品牌该如何如何去设计？这个违背了我们的公司品牌！等等。之前我有谈过关于 品牌灵魂的
- 熟悉SQL的人都知道，完成同一个任务，SQL可能有多种写法，但不同写法的查询性能可能会有天壤之别，本文列举出五个查询优化的方法，当然，优化的
- 本文实例为大家分享了python人脸识别程序，大家可进行测试#coding:utf-8 import cv2 import sys from
- 先解释一下这篇Blog延期的原因，本来已经准备好了全部内容，但是当我重新回顾实例三的时候，发现自己还是存在认知不足的地方，于是为了准确表述，
- 废话不多说了，直接上代码吧！#!/usr/bin/env python# coding=utf-8# 画一棵樱花import turtlei
- 只要把下面代码放到index.asp或者default.asp中，只要在首页代码顶部引用call Check_Wap()，这个也是我的工程中
- Python 中 ‘unicodeescape' codec can't decode bytes in position
- 本文较为详细的分析了python内存管理机制。分享给大家供大家参考。具体分析如下：内存管理，对于Python这样的动态语言，是至关重要的一部
- 在pycharm使用过程中，对于每次新建文件的编码格式和关于代码编写者的一些个人信息快捷填写，方法如下：1.打开pycharm，选择File
- 借助 org.springframework.ui.Model 对象或 Map 对象将信息传到 springmvc 的页面中需要：jstl
- 如何导入SQL数据库如何将现成的数据库导入到MySQL中？有两种方式：通过终端命令行语句导入：mysql> source SQL文件的
- 前言Stream 是一个基于 Go 1.18+ 泛型的流式处理库, 它支持并行处理流中的数据. 并行流会将元素平均划分多个的分区, 并创建相
- 暂时是一个手动设置无向图中的边，用一个二维数组表示，后面会改进为用户自己定义无向图的边。学习python的新手，若大佬有解决的办法，希望不吝
- 一、日志输出到文件使用模块：logging可以生成自定义等级日志，可以输出日志到指定路径日志等级：debug(调试日志) < info
- 在web开发中经常用到验证码，为了防止机器人注册或者恶意登陆和查询等，作用不容小觑但是验证码其实不是一个函数就能搞定的，它需要生成图片和水印
