sass 安装与使用

it2022-05-06  24

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

相关资源:sass(scss)的安装与使用教程

最新回复(0)