sass语法，compass命令使用

省略sass/compass安装的过程^_^

sass

1. 常用命令

sass main.scss //打印到控制台

sass main.scss main.css //输出到main.css中

sass-convert main.scss main.sass// scss sass相互转化

2. 中文编译问题

sass文件中，代码若有中文编译Sass 文件出现Syntax error: Invalid GBK character报错,需要修改ruby对中文的支持。

  • 找到ruby的安装目录，里面也有sass模块，找到文件engine.rb。如这个路径:C:\Ruby23-x64\lib\ruby\gems\2.3.0\gems\sass-3.4.22\lib\sass\engine.rb(用everything搜索engine.rb)

  • 在这个文件里面engine.rb，添加一行代码：
    Encoding.default_external = Encoding.find(‘utf-8’)
    放在所有的require XXXX 之后即可。

3. sass语法

1.文件导入

sass文件名规则，文件名_variables.scss
导入的时候只需要这么写：

import 'variables'

可以看到不需要下划线和后缀，sass编译器认为variables == _variables.scss

2. 变量

变量的声明：

    $baseSize:62.5%;
    $baseColor: #f0f;

变量的使用

html {
    font-size: $baseSize;
    color: $baseColor;
}

3. mixin

mixin声明

@mixin col-6 {
    width: 50%;
    float: left;
}


@mixin col($width: 40%) {
    width: $width;
    float: left;
}

@mixin col-sm($width: 50%) {
    @media (min-width: 768px) {
        width: $width;
        float: left;
    }
}

mixin使用

div.content {
   /*@include col-6();*/
   //@include col(); //无参数括号可以省略
   @include col-sm();

   &:hover {
        background-color:#f5f5f5;
   };

    @at-root //编译后寻址路径不再是：div.content .content-title{}
   .content-title {
        color: #0f0;
        font-size: 2em;
   }
}

4. extend

extend使用

//编译到css中
/* .error { 
    color: red;
} */

//不会编译到css中
%error {
    color: red;
}

.serious-error {
    @extend %error;

    border: 1px solid red;
}

compass

1. 文件配置config.rb

require 'compass/import-once/activate'
# Require any additional compass plugins here.

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"

2. compass常用命令

compass create myproject //创建compass项目

compass compile //编译

compass watch //监听文件修改，及时编译，需要配置文件

参考资料
http://www.ruanyifeng.com/blog/2012/06/sass.html
http://www.ruanyifeng.com/blog/2012/11/compass.html

http://www.imooc.com/learn/371
http://www.imooc.com/learn/364

vue-cli模板文件使用scss的坑

我们知道.vue文件使用sass的方式有如下几种方式

  1. 使用内联style
<style lang="scss">
</style>
  1. 使用外部文件scss
<style lang="scss">
  @import './styles/main.scss
</style>

<style src="./styles/main.scss"></style>

如果我想要在模板页中使用scss中，不是在组件.vue文件该如何使用呢？

其实很简单，只需要在入口js文件中导入scss文件即可。
main.js

require('../static/scss/portal.scss')

不要做如下操作：不要

在文件webpack.base.conf.js, 添加如下代码

 {
   test: /\.scss$/,
    loader: 'style!css!scss',
    include: projectRoot,
    exclude: /node_modules/
  },

这样会一直报错

ERROR in ./src/news.js
Module not found: Error: Cannot resolve module 'scss' in D:\yodean\workspace\meb\src
 @ ./src/main.js 3:0-37

原因是：vue对CSS, SASS/SCSS, Stylus.做了加载配置。查看projectRoot/build/utils.js

stackoverflow:
http://stackoverflow.com/questions/37031123/why-am-i-not-being-able-to-compile-sass-with-webpack

Yeoman搭建angular的坑：Uncaught ReferenceError: angular is not defined(…)

1. 问题

今天用yeoman搭建angular环境，搭建完成之后，执行操作：

gulp serve

页面老是报错：Uncaught ReferenceError: angular is not defined(…)

2. 操作步骤

npm install -g generator-angular
yo angular angular-in-action
cnpm install && bower install

这个时候执行gulp serve就会出现文章一开始说的问题。

打开index.html，可以如下代码，注意不能删除，这样页面才在哪放置 inject 数据流

  <!-- build:js(.) scripts/vendor.js -->
    <!-- bower:js -->
    <!-- endbower -->
    <!-- endbuild -->

3. 解决方法

3.1 为taskserve添加bower任务

gulp.task('serve', function (cb) {
  runSequence('clean:tmp',
    ['lint:scripts'],
    ['start:client'],
    ['bower'], //添加bower
    'watch', cb);
});

3.2 修改bower输出路径

// inject bower components
gulp.task('bower', function () {
  return gulp.src(paths.views.main)
    .pipe(wiredep({
      directory: yeoman.app + '/bower_components',
      ignorePath: '..'
    }))
  .pipe(gulp.dest(yeoman.app)); //修改输出路径
});

3.3 拷贝bower_components到app目录下

重新执行

gulp serve

http://xhope.top/wp-content/uploads/2016/11/12.jpg
完成

issue:
https://github.com/yeoman/generator-angular/issues/1295
https://github.com/yeoman/generator-angular/issues/1299

yeoman创建webapp

1 . 全局安装yeoman

npm install -g yo

2 . 全局安装bower

npm install -g bower

3 . install 基本的项目模板(generator)

$ npm install generator-webapp -g

4 . 创建项目

yo webapp my-project
cnpm install & bower install

5 .gulp执行项目

gulp serve

webpack学习

一、什么是webpack

随着网页内容的越来越丰富，在我们的网页上我们经常要用到很多的脚本文件，比如幻灯模块的脚本、列表模块的脚本和搜索模块的脚本等等。如果不对这些文件进行统一的打包，整个页面就会非常的凌乱。

于是，webpack就诞生了，我们可以把它想象成一台洗衣机+烘干机+叠衣机(据说岛国已经发明类似的机器人了)，我们可以把杂七杂八的衣服、裤子、袜子等等都丢进去，然后它就会帮我们洗干净、烘干、叠整齐了，一系列工作全自动完成，不需要我们亲自动手，怎么样，是不是很心动。

二、安装

//全局安装的作用是直接在命令行中使用
npm install -g webpack
//安装到项目目录，使用webpack的功能
npm install --save-dev webpack

三、创建项目

项目目录结构：
http://xhope.top/wp-content/uploads/2016/11/11.jpg

文件内容：
1. package.json
package.json 中包含各种所需模块以及项目的配置信息（名称、版本、许可证等）meta 信息。

{
  "name": "demo01",
  "version": "1.0.0",
  "description": "just learn webpack",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --content-base build --inline --hot"
  },
  "author": "Rick.Xu",
  "license": "ISC",
  "dependencies": {},
  "devDependencies": {
    "autoprefixer": "^6.4.0",
    "babel-core": "^6.0.0",
    "babel-loader": "^6.0.0",
    "babel-plugin-transform-runtime": "^6.0.0",
    "babel-preset-es2015": "^6.0.0",
    "babel-preset-stage-2": "^6.0.0",
    "babel-register": "^6.0.0",
    "chalk": "^1.1.3",
    "connect-history-api-fallback": "^1.1.0",
    "css-loader": "^0.25.0",
    "eventsource-polyfill": "^0.9.6",
    "express": "^4.13.3",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.9.0",
    "function-bind": "^1.0.2",
    "html-webpack-plugin": "^2.8.1",
    "http-proxy-middleware": "^0.17.2",
    "json-loader": "^0.5.4",
    "node-sass": "^3.11.2",
    "opn": "^4.0.2",
    "ora": "^0.3.0",
    "sass-loader": "^4.0.2",
    "semver": "^5.3.0",
    "shelljs": "^0.7.4",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "webpack": "^1.13.2",
    "webpack-dev-middleware": "^1.8.3",
    "webpack-hot-middleware": "^2.12.2",
    "webpack-merge": "^0.14.1"
  }
}
  1. webpack.config.js
    webpack.config.js是webpack的配置文件
var webpack =require('webpack');

var HtmlWebpackPlugin = require('html-webpack-plugin')

var path =require('path')


var static = path.resolve(path.resolve(__dirname), 'static')


module.exports = {
    entry: {
        index:'./static/javascript/index.js' //入口点
     },
    output: {
        path: path.resolve(__dirname,'dist'), //输出位置
        filename:'[name].js',                 //编译后的文件名
        publicPath:'./'                      //部署访问的路径
    },
    module: {
        loaders: [ 
         {test:/\.css$/,loader:'style!css'},
         {test:/\.scss$/,loader:"style!css!sass"} //sass加载器
      ]
     },
    devServer: {
        historyApiFallback: true,
        hot: true,
        inline: true,
        progress: true,
    },
    plugins:[
        new HtmlWebpackPlugin({
            filename: path.resolve(__dirname, './dist/index.html'), //编译后文件名
            template: './src/index.html',  //模板文件的位置
            inject: true,
            minify: {
                removeComments: true,
                collapseWhitespace: true,
                removeAttributeQuotes: true
            },
            chunksSortMode: 'dependency',
            chunks: ['manifest','vendor','index']//需要引入的Chunk，不配置就会引入所有页面的资源；index表示entry的key，说明该模板文件需要引入index.js
        }),
       new webpack.optimize.UglifyJsPlugin({    //压缩代码
            compress: {
           warnings: false
       },
       except: ['$super', '$', 'exports', 'require']    //排除关键字
      })
    ]
}
  1. index.js
    index.js是一个入口文件，该入口文件引用了两个模块module.js``index.scss
require('../stylesheet/index.scss');

document.write('webpack works.')
document.write(require('./module.js'))
  1. 模块module.js
module.exports='<br/>It works from module.js.'
  1. 模块index.scss
    index.scss是一个样式文件
$myColor:blue;

body {
    color: $myColor;
}

四、编译

  1. 安装依赖
$ npm install

安装完成之后，我在项目路径下生成文件夹node_module
2. 编译打包

$ webpack

会在dist目录下生成文件index.html index.js,浏览器查看index.html,效果图如下

http://xhope.top/wp-content/uploads/2016/11/21.jpg