nizsheanez/yii2-asset-converter

为 Yii2 提供的 Less、Sass、Scss 和 Phamlp 转换器。无需系统依赖。支持 yii2-composer,Less 自动更新,自定义输出目录

安装次数: 144,599

依赖者: 6

推荐者: 0

安全: 0

星标: 64

关注者: 8

分支: 43

类型:yii2-extension

v2.0.1 2020-05-08 01:31 UTC

README

仅适用于 YII2 新的资产管理器,无需外部工具和可执行文件即可将 Less 和 Sass 文件转换为 CSS。使用 PHP 库将 Sass 和 Less 文件转换为 CSS,它替代了使用外部工具的 AssetConverter。Less 和 Sass 文件根据时间源文件依赖关系进行转换。

###要求

YII 2.0

###使用方法

  1. 使用 Composer 安装
"require": {
    "nizsheanez/yii2-asset-converter": "1.*",
},

php composer.phar update
  1. 修改配置文件 {app}/protected/config/main.php 中的 assetManager
    'assetManager' => [
        'bundles' => require(__DIR__ . '/assets.php'),
        'converter'=> [
            'class'=>'nizsheanez\assetConverter\Converter',
        ]
    ],
  1. 享受吧!
  • 扩展名为 .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
                        ],
                    ],
                ],
            ],
        ],
    // ...