正文

sass 安装与使用

IP云
IP云V管理员/3 阅读
12/01
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

1.安装。

安装ruby ：http://rubyinstaller.org/downloads

创建项目：在f盘创建一个名为sass的文件夹

ruby命令行：f:

ruby命令行：cd sass

ruby命令行：gem install sass

ruby命令行：gem update sass   更新

ruby命令行：gem uninstall sass 卸载

ruby命令行：sass -v 版本检查

2.ruby编译初尝试：

test.scss 

$body-color:#FF6000;

body{

    background-color: $body-color;

}

index.html 

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<link rel="stylesheet" href="css/test.css" />

	</head>

	<body>

	</body>

</html>

下面将scss文件编译到css文件下

ruby命令行：sass --watch demo1/scss/test.scss:demo1/css/test.css        // --watch 可以不加，加上的目是在修改完scss文件后自动编译更新。

或ruby命令行：sass --watch demo1/scss/:demo1/css    //将demo1/scss下的文件全部编译到demo1/css文件下

3.webpack打包编译并自动编译更新

index.html: 

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

	</head>

	<body>

		<h1>webpack打包scss文件</h1>

		<script src="bundle.js" type="text/javascript" charset="utf-8"></script>

	</body>

</html>

sass.scss: 

$color:#dbdbdb;

$font-color:#333333;

body{

    background-color: $color;

}

h1{

    color:$font-color;

}

index.js 

require('./sass.scss');

webpack.config.js: 

module.exports = {

  entry: './index.js',

  output: {

  	publicPath:'',

    filename: 'bundle.js'

  },

  module: {

    loaders: [

        {

            test:/\.scss$/,

            loader:['style-loader','css-loader','sass-loader']

          }

    ]

  }

}

package.json修改scripts如下： 

  "scripts": {

    "start":"webpack-dev-server --progress --colors --hot --inline"

  },

node命令行：webpack

node命令行：webpack-dev-server

如果有很多报错，则是未安装一些模块和加载器。如果报cant find module 或 cant resole .......

如处理： cnpm install --save-dev css-loader    cnpm install --save-dev style-loader   cnpm install --save-dev sass-loader  cnpm install --save-dev node --sass

cnpm install --save-dev webpack webpack-dev-server

相关阅读

目录[+]