csegedicsaba / yii2-asset-converter
Yii2 的 Less、Sass、Scss 和 Phamlp 转换器。无需额外系统。支持 yii2-composer,Less 自动更新,可自定义输出目录
2.0.0
2019-03-22 15:51 UTC
Requires
- php: >=5.4.0
- csegedicsaba/phpsass: 1.*
- leafo/scssphp: 0.*
- oyejorge/less.php: 1.7.0.*
- yiisoft/yii2: 2.*
- yiisoft/yii2-composer: 2.*
- yourilima/scssphp-compass: 1.*
README
仅适用于带有新资产管理器的 YII2,无需外部工具和可执行文件,即可将 Less 和 Sass 文件转换为 CSS。使用 PHP 库转换 sass 和 less 文件。它替换了使用外部工具的 AssetConverter。Less 和 Sass 文件将根据时间源文件依赖进行转换。
###需求
YII 2.0
###使用方法
- 使用 Composer 安装
"require": { "nizsheanez/yii2-asset-converter": "1.*", }, php composer.phar update
- 修改配置文件 {app}/protected/config/main.php 中的 assetManager
'assetManager' => [ 'bundles' => require(__DIR__ . '/assets.php'), 'converter'=> [ 'class'=>'nizsheanez\assetConverter\Converter', ] ],
- 在
- 享受吧!
- 以 .sass 扩展名结尾的文件将转换为 .css 文件
- 以 .less 扩展名结尾的文件将转换为 .css 文件
- 以 .scss 扩展名结尾的文件将转换为 .css 文件
###资产配置文件示例 /protected/config/assets.php
return [ 'app' => [ 'basePath' => '@webroot', 'baseUrl' => '@web', 'css' => [ 'css/bootstrap.min.css', 'css/bootstrap-responsive.min.css', 'css/site.css', 'css/less_style.less', 'css/sass_style.sass', ], 'js' => [ ], 'depends' => [ 'yii', ], ], ];
###编译文件在哪里?
默认情况下位于 @webroot/compiled,但您可以通过配置中的 destinationDir 属性进行更改
完整配置
'components' => [ 'assetManager' => [ 'converter'=> [ 'class'=> 'nizsheanez\assetConverter\Converter', 'force'=> false, // true : If you want convert your sass each time without time dependency 'destinationDir' => 'compiled', //at which folder of @webroot put compiled files 'parsers' => [ 'sass' => [ // file extension to parse 'class' => 'nizsheanez\assetConverter\Sass', 'output' => 'css', // parsed output file type 'options' => [ 'cachePath' => '@app/runtime/cache/sass-parser' // optional options ], ], 'scss' => [ // file extension to parse 'class' => 'nizsheanez\assetConverter\Sass', 'output' => 'css', // parsed output file type 'options' => [] // optional options ], 'less' => [ // file extension to parse 'class' => 'nizsheanez\assetConverter\Less', 'output' => 'css', // parsed output file type 'options' => [ 'importDirs' => [], // import paths, you may use path alias here ex. '@app/assets/common/less' 'auto' => true, // optional options ] ] ] ] ], ],
此外,对于 SCSS 文件,您还可以使用替代配置
'components' => [ 'assetManager' => [ 'converter'=> [ // ... 'parsers' => [ // ... 'scss' => [ // file extension to parse 'class' => 'nizsheanez\assetConverter\Scss', 'output' => 'css', // parsed output file type 'options' => [ // optional options 'enableCompass' => true, // default is true 'importPaths' => [], // import paths, you may use path alias here, // e.g., `['@path/to/dir', '@path/to/dir1', ...]` 'lineComments' => false, // if true — compiler will place line numbers in your compiled output 'outputStyle' => 'nested', // May be `compressed`, `crunched`, `expanded` or `nested`, // see more at https://sass-lang.cn/documentation/file.SASS_REFERENCE.html#output_style ], ], ], ], ], // ...