使用引導和更少的Angular 2 webpack

我是Angular 2的新手。我無法在我的應用程序中使用較少的文件。結構使用引導和更少的Angular 2 webpack

-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。我在供應商中包含了bootstrap npm模塊。 variable.less也可以輸入svg圖標。

有人可以幫我理解這個錯誤嗎？我以爲我的少文件正被少裝載器處理。

有沒有更好的方法在我的應用程序中包含css？

來源

2016-11-29 Akanksha

要導入LESS文件到SCSS文件，在這裏：

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

如果要導入variables.less，那麼你就需要把它編譯成CSS第一（如果它是一個引導文件，然後我確定.css已經存儲在某處）。

來源

2017-02-21 10:12:31

使用引導和更少的Angular 2 webpack

回答

相關問題