angular2项目如何使用sass

angular/cli支持使用sass 新建工程: 如果是新建一个angular工程采用sass: ng new My_New_Project --style=sass 这样所有样式的地方都将采用sass样式,如果需要使用sass的scss语法,还可以如下方式: ng new My_New_Project --style=scss 然后需要手动安装node-sass: npm install node-sass --save-dev 这样就可以实现用sass语法做样式了. 已有angular-c…

关于npm构建angular2项目问题

我在win10系统下用npm构建好angular2项目之后,在命令行下运行 ng serve --open,报一下错误: Unknown browser query 'basedir=$(dirname) "$(echo "$0" | sed -e 's,\\,/,g)")' 请求指点,截图如下:…

vue项目中引入Sass

Sass作为目前成熟,稳定,强大的css扩展语言,让越来越多的前端工程师喜欢上它.下面介绍了如何在vue项目中引入Sass. 首先在项目文件夹执行命令 npm install vue-cli -g,安装vue-cli脚手架,若是已经安装了,则不必再次安装,直接跳过这一步.接下来执行命令行vue init webpack mypro(注:mypro是项目名). 接下来安装Sass依赖包,使用以下命令行: npm install sass-loader --save-dev npm instal…

[Vscode插件] 自动编译项目中的Sass文件为CSS

插件名 : Live Sass Compiler 今天在VSCode中发现了一个自动watch项目目录下sass文件的插件,摆脱了在控制台中进行手动watch的繁琐. 安装好以后点击右下角即可自动编译并watch整个项目下的sass文件这是默认模式下编译出来的文件,更多的配置及功能可到插件主页查阅…

如何在ASP.NET 5上搭建基于TypeScript的Angular2项目

一.前言就在上月,公司的一个同事建议当前的前端全面改用AngularJs进行开发,而我们采用的就是ASP.NET 5项目,原本我的计划是采用TypeScript直接进行Angular2开发.所以借用这段时间来写下如何在ASP.NET 5下搭建基于TypeScript的Angualr2的项目,下面我们就进入正题. 二.环境配置如果读者直接按照Angular.io上的方式搭建是无法通过的,所以下面我们的教程基本跟Angular.io上的类似,只是其中的配置会有所不同,并且也会多出一些步骤. 1.…

(三) Angular2项目框架搭建心得

前言: 在哪看到过angular程序员被React程序员鄙视,略显尴尬,确实Angular挺值得被调侃的,在1.*版本存在的几个性能问题,性能优化的"潜规则"贼多,以及从1.*到2.*版本的面目全非,不过宽容点来看这个强大的框架,升级到ng2肯定是一件好事情,虽然截至目前ng2还存在或多或少需要完善的地方,但是ng2做到了留下并强化ng1好的部分,移除或改善其不好的部分,并且基于许多较新Web技术来开发,不去看从ng1迁移到ng2的门槛和工作量的话,ng2的编程体验是很酷炫的. 目前n…

1.搭建Angular2项目

简述:搭建angular2的开发环境,网上已经有许多教程,不过都是window系统下的教程,我本人使用的是linux系统,搭建环境的过程也稍微比前者麻烦了一点,可参考本人的另一篇文章Linux系统下安装Angular2开发环境(Ubuntu16.0) 1. pakeage.json配置文件:是用来声明项目中使用的模块,在部署环境时,只要在pakeage所在的目录执行npm install命令就可以安装所有需要的模块了. 新建一个文件夹作为项目的根目录,整个项目的文件都存放在这个文件夹下面.在根目…

项目中使用sass，如何实现自动编译

本次React项目中用到了Sass,在一个主文件main.scss中引入了其余的scss文件,然后把main.scss文件编译为main.css文件,最后在项目的主文件入口index.html中引入main.css.我在开发过程中,直接修改scss文件,但是没有效果.想想原因应该是scss文件没有重新编译.查询了资料之后发现sublime可以安装sublime build插件,在修改完之后ctrl+b,实现重新编译.但是在我们老大的强烈建议下把sublime遗弃,使用真正的前端开发神器webst…

angular2项目关于主页结构分析

这里需要弄清楚两个问题: 一:主页模块如何加载进来 angular2的根模块应用加载之后便会根据根模块路由信息来加载主页模块 export const appRoutes=[ { path:'', redirectTo:'home', pathMatch:'full' }, { path:'home', loadChildren:'./home/home.module#HomeModule' }, 如上:path:" " 代表该模块加载后自动加载指定的组件.这里为什么不直接{path:…

angular2项目关于Echarts图表的处理

在NiceFish项目中关于Echarts组件和指令是直接注册在appModule根模块中的,这样路由只需这样写就可以让浏览器加载图标组件: 在chart组件视图中: <div class="row" [@fadeIn]> <div class="col-sm-12"> <echart [chartType]="pieChart" class="nf-chart"></echart&g…

angular2项目关于动画的处理

animations动画在angular2官网里面已经讲解很详细了,那么动画功能在实际项目中应该如何组织文件,动画文件放在哪个位置,如何来组织结构使得动画模块和其他模块之间运作调理清晰呢,下面参照NiceFish来讲解一下: 一:定义动画在app文件夹里面有一个专门的动画模块拿一个例子来简单分析一下: import { trigger, state, style, transition, animate, keyframes } from '@angular/animations'; ex…

在vue项目中使用sass

如果想开发移动端项目,那么适配的时候sass必不可缺,但是 npm 安装sass时候总是报错失败! 研究半天发现可以解决的方法,亲测有效 1.先换成淘宝镜像再安装 npm install -g cnpm --registry=https://registry.npm.taobao.org (安装淘宝镜像)用淘宝镜像快!而且安装的时候减少出错! cnpm install node-sass --save-dev //安装node-sass cnpm install sass-loader --s…

在vue-cli建的vue项目中使用sass

前面已使用vue-cli新建了一个vue项目,参考使用命令行创建一个vue项目的全部命令及结果首先看下新建项目的页面和代码,有部分修改,可忽视,如下图: 然后我们在页面添加sass的代码: 修改完保存后立即就报错了: 在使用scss之前,我们首先需要安装相关的插件: 这里参考的是:链接( vue 项目使用sass ) $ npm install node-sass --save-dev > node-sass@4.9.0 install F:\05 poverty al…

ionic 项目中使用 sass

注: 1.先安装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 2.配置 gulpfile.js -->> 1) Scss简介: 官网:http://sass-l…

在vue-cli + webpack 项目中使用sass

1.准备工作: 由于npm的服务器在国外,网速慢而且安装容易失败,建议在安装之前,先安装国内的镜像,比如淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org 2.安装vue-cli 全局安装 vue-cli cnpm install vue-cli -g 3.创建项目 vue init webpack vue-Project //初始化基于webpack模板项目 cd vue-Project cnpm instal…

vue中项目如何引入sass （vue-cli项目）

1.进入项目目录 2.安装sass的依赖 npm install --save-dev sass-loader npm install --save-dev node-sass 3.在build文件夹下的webpack.base.conf.js的rules里面添加配置(和其它配置项形式一样即可) { test: /\.sass$/, loaders: ['style', 'css', 'sass'] } 4.在使用sass的vue文件的 <style lang="scss"&…

vue-cli3.0 项目如何使用sass

执行: npm install node-sass --save-dev npm install sass-loader --save-dev 自动安装sass,vue-cli3.0 不需要在 webpack.base.config.js 配置,直接使用.(此处可能有误,自己在执行的时候直接可以在页面用了,没有配置,其他博客有看到说需要配置,此处可能有误,欢迎指正) <style lang="less" scoped> </style>…

项目中使用sass预处理器

安装sass npm install node-sass sass-loader --save 新建样式文件后缀为 .scss 在使用样式的页面引入:import 'xx.scss';…

如何在vue项目中使用sass（scss）

1.用npm/cnpm/yarn安装sass的依赖包 npm install --save-dev sass-loader npm install --save-dev node-sass 或者: yarn add sass-loader node-sass 2.在build目类下找到webpack.base.conf.js文件,在module的rules中插入以下代码: module: { rules: [ { test: /\.vue$/, loader: 'vue-loader', opt…

vue项目中使用sass

1 安装sass npm install --save-loader npm install --save-dev node-sass 2 安装依赖 cnpm install stylus-loader css-loader style-loader --save-dev…

angular2项目打包部署的坑

1.ng项目打包后,打开index.html,发现页面是空白的,F12查看,发现js和css引入的路径不对这里要将package.json文件的打包命令改成 ng build --prod --base-href ./ 打包时,执行npm run build 即可. 如图:…

【项目实战】sass使用基础篇（上）

Sass是一种CSS预处理语言.CSS预处理语言是一种新的专门的编程语言,编译后形成正常的css文件,为css增加一些编程特性,无需考虑浏览器的兼容性(完全兼容css3),让css更加简洁.适应性更强,可读性更佳,更易于代码的维护等诸多好处. CSS预处理语言有Scss(Sass) 和Less.Postcss. Scss和Sass sass一开始用的是一种缩进式的语法格式采用这种格式文件的后缀名是.sass 在sass3.0版本后我们常用的是sassy css语法,扩展名是.scss,更接近与…

angular2项目添加ng2-bootstrap

1. 先webstome创建一个空的工程.例如test File--> New -->Project --> Empty Project 2.然后命令行(Alt+F12)下执行以下命令 2.1 进入该工程 C:\Users\hwx407441\WebstormProjects>cd test 2.2.全局安装angular-cli npm install -g @angular-cli 2.3.安装ng2-bootstrap和bootstrap npm install ng2-bo…

gulp管理angular2项目配置文件