sass 安装与使用

最新推荐文章于 2023-05-19 20:21:58 发布

weixin_30610755

最新推荐文章于 2023-05-19 20:21:58 发布

阅读量89

点赞数

原文链接：http://www.cnblogs.com/changyaoself/p/7993335.html

版权

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

转载于:https://www.cnblogs.com/changyaoself/p/7993335.html