Yii2は、TSを使用しました

動作環境放浪UbuntuのボックスになどSASS、typescriptですが、インストールしてください

必要なソフトウェアをインストールします。

sudo su -c "gem install sass" # 可选,安裝sass
sudo su -c "npm install -g typescript" # 可选,ts命令
sudo su -c "npm install -g less" # 可选,less命令
sudo su -c "npm install stylus -g" # 可选,stylus命令
sudo su -c "npm install -g coffee-script" # 可选,coffee命令

上記のnpmコマンドがインストールされ、システムに依存しruby、node

宝石の上に、窓のコマンドCMDにおけるNPMは、実行することができます

高度なテンプレートを使用して、修正common/config/main.php（変更、基本テンプレート場合はconfig/web.phpファイル）を、components追加の配列assetManager要素の設定

 'assetManager' => [
            'converter' => [
                'class' => 'yii\web\AssetConverter',
                'commands' => [
                    'scss' => ['css', 'sass {from} {to} --sourcemap'],
                    // 其他命令
                    'less' => ['css', 'lessc {from} {to} --no-color --source-map'],
                    'sass' => ['css', 'sass {from} {to} --sourcemap'],
                    'styl' => ['css', 'stylus < {from} > {to}'],
                    'coffee' => ['js', 'coffee -p {from} > {to}'],
                    'ts' => ['js', 'tsc --out {to} {from}'],
                ],
            ],
        ],

次のような図の効果：

TSの直接導入、AppAsset.phpでSASSファイル

class AppAsset extends AssetBundle
{
    public $basePath = '@webroot';
    public $baseUrl = '@web';
 
    public $css = [
        'css/index.scss', // 引入 scss 文件
    ];
    public $js = [
        'js/index.ts', //引入 ts 文件
    ];
    // 其他内容...
}

index.tsデモコンテンツ

let myName = "hello";

コンテンツがあるため、最後のページが自動的にインストールされ、index.jsを輸入しています。

var myName = "hello";

場合は上記の編集index.cssまたはindex.ts対応するCSSやJSファイル用にインストールされます。

リファレンス

1. yii2 TSを使用する方法を知っています
2. 活字体始めるために5分
3. あまり使用のインストール
4. スタイラスとスタイリングを取得
5. CoffeeScriptの中国
6. Yii2-リソース管理（資産）リソースコンバータの使用