Использование bootstrap и меньше с Angular 2 webpack

Question

Я новичок в Angular 2. Я не могу использовать меньше файлов в своем приложении. структура

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

мой WebPack конфигурации является

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' 
     } 
    ], 
    }, 

мой app.component.scss выглядит следующим образом:

@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 от бутстрапа. Я включил модуль bootstrap npm в моем поставщике. variable.less также имеет запись для значков svg.

Может кто-нибудь, пожалуйста, помогите мне понять эту ошибку? Я думал, что мой меньший файл обрабатывается меньшим загрузчиком.

Есть ли лучший способ включить css в мое приложение?

Answer 1

Вы импортируете МЕНЬШЕ файл в файл SCSS, здесь:

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

Если вы хотите импортировать variables.less, то вам нужно будет скомпилировать его в CSS первого (если это Bootstrap файл, то Я уверен, что .css уже где-то хранится).