78084


<https://akveo.github.io/blur-admin/articles/002-installation-guidelines/>  
これをビルドしてみたのですがスタイルが適用されません

* * *

実行したのはこれだけです

[code]

    git clone https://github.com/akveo/blur-admin.git
    cd blur-admin
    npm install
    
    rm ~/.eslintrc.json # これをしないと gulp "angular" is not defined というエラーが出る
    
    gulp serve
    
[/code]

ブラウザの画面を起動すると、個別のグラフ等のスタイルは適用されていますが  
全体的なレイアウトスタイルが適用されていません  
SASS周りの何かがおかしいんだと思うんですが  
anglar も gulp も初めてで何からしらべればいいかがわからず困っています

以下の起動時のログですが SASSの色周りで DEPRECATION WARNING がでるだけでとくにエラー等は出ていません

[code]

    [15:45:12] Using gulpfile ~/git/blur-admin/gulpfile.js
    [15:45:12] Starting 'scripts'...
    [15:45:12] Starting 'styles'...
    [15:45:13] Starting 'stylesAuth'...
    [15:45:13] Starting 'styles404'...
    [15:45:13] Starting 'copyVendorImages'...
    
    DEPRECATION WARNING on line 41 of ...
    The operation `#209e91 minus 24` is deprecated and will be an error in future versions.
    Consider using Sass's color functions instead.
    http://sass-lang.com/documentation/Sass/Script/Functions.html#other_color_functions
    
    [15:45:14] Finished 'styles404' after 1.45 s
    [15:45:14] Starting 'inject404'...
    [15:45:14] Finished 'stylesAuth' after 1.47 s
    [15:45:14] Starting 'injectAuth'...
    [15:45:15] gulp-inject 1 files into 404.html.
    [15:45:15] gulp-inject 1 files into auth.html.
    [15:45:15] Finished 'inject404' after 202 ms
    [15:45:15] gulp-inject 1 files into reg.html.
    [15:45:15] Finished 'injectAuth' after 244 ms
    [15:45:15] gulp-inject 1 files into main.scss.
    [15:45:15] Finished 'styles' after 2.48 s
    [15:45:16] Finished 'copyVendorImages' after 2.55 s
    [15:45:16] all files 244.11 kB
    [15:45:16] Finished 'scripts' after 3.64 s
    [15:45:16] Starting 'inject'...
    [15:45:16] gulp-inject 1 files into index.html.
    [15:45:16] gulp-inject 139 files into index.html.
    [15:45:16] Finished 'inject' after 134 ms
    [15:45:16] Starting 'watch'...
    [15:45:16] Finished 'watch' after 123 ms
    [15:45:16] Starting 'serve'...
    [15:45:16] Finished 'serve' after 30 ms
    [BS] [BrowserSync SPA] Running...
    [Browsersync] Access URLs:
     -------------------------------------
           Local: http://localhost:3002/
        External: http://192.168.1.5:3002/
     -------------------------------------
              UI: http://localhost:3003
     UI External: http://192.168.1.5:3003
     -------------------------------------
    [Browsersync] Serving files from: .tmp/serve
    [Browsersync] Serving files from: src
    
[/code]

* * *

環境は MacOS

[code]

    node -v
    v11.15.0
    
    gulp --version
    CLI version: 2.3.0
    Local version: 3.9.1
    
    npm -v
    7.19.1
    
[/code]


CC BY-SA 4.0
2021-07-09T07:05:27.523
78069
2021-07-13T03:13:13.833
2021-07-13T03:13:13.833
3060
question
node.js angularjs sass
blur-admin でスタイルが適用されない


まずAngularJS 1.x系なのでNodeのバージョンを下げた方が良いです  
8か10あたりのバージョンになると思います（Nodeは偶数バージョンが安定版です）  
両バージョン試しましたが私の環境では `gulp "angular" is not defined` は発生しませんでした

`gulp serve` 後、コンソールログに以下のエラーが出力されていました

[code]

    Uncaught TypeError: this.zoomControl.update is not a function
    
[/code]

エラー内容から以下のissueを見つけました  
<https://github.com/akveo/blur-admin/issues/511>

コメント通り `gulp-inject` パッケージをアップグレードするとcssが反映されました

**package.json**

[code]

    // 4.x.xから5系に書き換え
    "gulp-inject": "~5.0.5",
    
[/code]

修正後に再度 `npm install && gulp serve` を実行すればcss適用されると思います


CC BY-SA 4.0
2021-07-09T16:34:08.157
78084
2021-07-09T16:34:08.157
298
78069
answer