使用引导和更少的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

回答

相关问题