angular陆项目中运用scss

By admin in 4858美高梅 on 2019年4月15日

一、新建项目选用scss

安装angular/cli

1、将nodejs升级为^6.9.*4858美高梅 ,    npm 升级至^3.0.*  

cnpm install -g npm 就足以将npm升级至最新版本

2、cnpm install -g @angular/cli

叁、ng -v  查看是不是安装成功  大概要求本身加上环境变量

ng new my-project(不带路由)

ng new my-project –routing(带路由)

cd my-project

cnpm install  安装依赖

ng serve –open

接纳vue-cli搭建的vue项目,暗许是不辅助scss的,供给设置相应的插件才得以补助,上边说一下设置使用方式

实施的指令都是在脚下项指标根目录下举办

angular陆项目中运用scss。选择ng new 项目名称创建项目标时候

在项目中应用scss

1、cnpm install node-sass –save-dev

      cnpm install sass-loader –save-dev

二、更动angular-cli.json文件中的styles

将styles.css该为styles.scss

4858美高梅 1

angular-cli.json

4858美高梅 2

angular-cli.json

将styleExt: css 改为 scss

4858美高梅 3

三、然后将品种在那之中的大局styles.css改为styles.scss

进行上边发号施令,安装sass-loader 和 node-sass组件

1、vue-cli 安装sass

ng
new my-app –skip-install –prefix mpr
–style=scss

npm install –save-dev sass-loader

    a、npm install style-loader css-loader sass-loader –save-dev  
//(–save-dev == -D)

贰、已有品种选择scss

npm install –save-dev node-sass

    b、npm install  node-sass –save-dev  //(sass-loader
依赖于node-sass)

首先,安装node-sass包

实行下边发号施令,安装scss 和
scss-loader组件(如若不安装那七个,在修改外部引用的scss文件时报错./node_modules/css-loader?{“minimize”:false,”sourceMap”:false}!./node_modules/vue-loader/lib/style-compiler?)

    c、npm install extract-text-webpack-plugin
 //(这个是webpack抽离css的插件,这个cli自带了,可以-v检查下)

npm
install node-sass –save-dev

npm install –save-dev scss

    d、在webpack.base.config.js 文件中 

再来,安装sass-loader包

npm install –save-dev scss-loader

    module:{

npm install sass-loader –save-dev

在vue组件里的style标签增多lang=”scss”  <style
lang=”scss”>,然后style里面包车型大巴体制就可以利用scss语法。假如在style中引进外部scss文件,@import 
‘./scss/common’;

        rule:[

然后修改angular.json配置:

如果在main.js中引入scss文件,使用import ‘./scss/common.scss’

            {

4858美高梅 4

注:在style和js中引进scss文件的差别是,style中import前必要加@前面必要加分号,不供给写文件后缀.scss。在js中左右不必要加@和支行,不过文件名背后总得加后缀.scss,不然会报错

              test:/\.scss$/,

 

              loaders:[“style”,”css”,”sass”]

            }

        ]

    }

e、使用 在.vue文件<style lang=”scss” type=”text/css”
scoped></style> 内部写scss  ,scoped 组件class模块化

2、安装font-awesome

    a、npm install font-awesome 

    b、main.js 文件中 import ‘font-awesome/css/font-awesome.css’

    c、使用 在要求的地点 <span class=”fa fa-xxx”></span>

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有