Question

我是Angular 2的新手。我无法在我的应用程序中使用更少的文件。结构

#import "UILabel+CustomStyle.h"
[label applyCustomStyle];

我的webpack配置是

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

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

theme.css和variable.less来自bootstrap。我在我的供应商中包含了bootstrap npm模块。 variable.less也有svg图标的条目。

有人可以帮我理解这个错误吗？我认为我的较少文件是由less-loader处理的。

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

Answer 1

您正在将LESS文件导入SCSS文件，此处：

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

如果你想导入variables.less，那么你需要先将它编译成CSS（如果它是一个Bootstrap文件，那么我确定.css已经存储在某处）。

使用Bootstrap和更少的Angular 2 webpack

1 个答案: