nizsheanez / yii2-asset-converter
为 Yii2 提供的 Less、Sass、Scss 和 Phamlp 转换器。无需系统依赖。支持 yii2-composer,Less 自动更新,自定义输出目录
v2.0.1
2020-05-08 01:31 UTC
Requires
- php: >=5.4.0
- richthegeek/phpsass: 1.*
- scssphp/scssphp: 1.*
- wikimedia/less.php: 3.0.0.*
- yiisoft/yii2: 2.*
- yiisoft/yii2-composer: 2.*
- yourilima/scssphp-compass: 1.*
README
仅适用于 YII2 新的资产管理器,无需外部工具和可执行文件即可将 Less 和 Sass 文件转换为 CSS。使用 PHP 库将 Sass 和 Less 文件转换为 CSS,它替代了使用外部工具的 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 ], ], ], ], ], // ...