ブートストラップを使用し、角2のウェブパックでlessを使用

Question

私は角度2を初めて使用しています。 構造

-src 
    |-app 
    |-app.component.ts, app.component.scss 
    |-assets 
    |-css 
     |-variable.less, theme.css, custom.css 

私のWebPACKの設定は次のように私のapp.component.scssがある

entry: { 
    'polyfills': './src/polyfills.ts', 
    'vendor': './src/vendor.ts', 
    'app': './src/main.ts' 
    }, 

    resolve: { 
    extensions: ['.js', '.ts', '.json', 'css', 'less', 'html'], 
    modules: [helpers.root('src'), 'node_modules'], 
    }, 

    module: { 
    rules: [ 
     //Load sourcemaps 
     { 
     enforce: 'pre', 
     test: /\.js$/, 
     loader: 'source-map-loader', 
     exclude: [ 
      // these packages have problems with their sourcemaps 
      helpers.root('node_modules/rxjs'), 
      helpers.root('node_modules/@angular'), 
      helpers.root('node_modules/@ngrx'), 
      helpers.root('node_modules/@angular2-material'), 
     ] 
     }, 
    { 
     test: /\.ts$/, 
     loaders: ['awesome-typescript-loader', 
       'angular2-template-loader', 
       'angular2-router-loader'], 
     exclude: [/\.(spec|e2e)\.ts$/] 
    }, { 
     test: /\.(woff2?|ttf|eot|svg)$/, 
     loader: 'url?limit=10000' 
    }, { 
     test: /\.json$/, 
     loader: 'json-loader' 
    }, { 
     test: /\.html$/, 
     loader: 'raw-loader', 
     exclude: [helpers.root('./index.html')] 
    }, { 
     test: /\.css$/, 
     loaders: ['to-string-loader', 'css-loader'] 
    }, { 
     test: /\.scss$/, 
     exclude: /node_modules/, 
     loaders: ['raw-loader', 'sass-loader'] // sass-loader not scss-loader 
    }, { 
     test: /\.less$/, 
     exclude: /node_modules/, 
     loader: 'raw-loader!less-loader' 
    }, { 
     test: /\.(jpg|png|gif)$/, 
     loader: 'file' 
    }, { 
     test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
     loader: 'inline-svg-loader' 
     } 
    ], 
    }, 

です：

@import "../assets/css/theme.css"; 
@import "../assets/css/custom.css"; 
@import "../assets/css/variables.less"; 

私はこの

@Component({ 
    selector: 'app-root', 
    templateUrl: 'app.component.html', 
    styleUrls: ['app.component.scss'], 
}) 

のようにそれを使用しています私はエラーが出ていますr

ERROR in ./src/app/app.component.scss 
Module build failed: 
undefined 
     ^
     Invalid CSS after "@gray-base:": expected 1 selector or at-rule, was "#000;" 

theme.cssとvariable.lessはブートストラップからのものです。私はベンダーにブートストラップnpmモジュールを含めました。 variable.lessにはsvgアイコンのエントリもあります。

誰かがこのエラーを理解できますか？私は少ないファイルがローダーで処理されていると思った。

私のアプリケーションにcssを含めるより良い方法はありますか？

Answer 1

あなたはここで、SCSSファイルにLESSファイルをインポートする：

@import "../assets/css/theme.css"; 
@import "../assets/css/custom.css"; 
@import "../assets/css/variables.less"; 

あなたがvariables.lessをインポートしたい場合は、ブートストラップファイルであれば、あなたは、（最初​​のCSSにコンパイルする必要があります。 .cssは既にどこかに保存されていると思います）。