Проблема установки с webpack, angular 2, css и sass

[ОБНОВЛЕНО ИЗ ИСХОДНОГО ВЫПУСКА] Я пытаюсь установить последнюю версию Angular2 с помощью веб-пакета для обработки sass. У меня сейчас обрабатываются файлы scss. Однако сейчас проблема с css.

Я добавил следующее в файл app.component.ts...

require('../../node_modules/bootstrap/dist/css/bootstrap.css');
require('../../public/styles/styles.scss');

Я получаю сообщение об ошибке сборки при запуске npm...

    ./~/bootstrap/dist/css/bootstrap.css
Module build failed: ReferenceError: window is not defined
bootstrap\dist\css\bootstrap.css doesn't export content

Соответствующие биты webpack.common.js...

{
    test: /\.css$/,
    loader: ExtractTextPlugin.extract({ loader: [{ loader: "style-loader" }, { loader: "css-loader" } ] })
  },
  {
    test: /\.scss$/,
    loader: ExtractTextPlugin.extract({ loader: [{ loader: "css-loader" }, { loader: "sass-loader" } ] })
  }

Фрагмент моего package.json...

"devDependencies": {
"@types/jasmine": "2.5.38",
"@types/node": "^6.0.42",
"codelyzer": "~2.0.0-beta.1",
"faker": "3.1.0",
"jasmine-core": "2.5.2",
"jasmine-spec-reporter": "2.5.0",
"json-server": "0.9.4",
"karma": "1.2.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-remap-istanbul": "^0.2.1",
"node-sass": "^4.4.0",
"protractor": "~4.0.13",
"raw-loader": "^0.5.1",
"sass-loader": "5.0.1",
"ts-node": "1.2.1",
"tslint": "4.3.0",
"typescript": "2.1.6",
"webdriver-manager": "11.1.1",
"angular2-template-loader": "^0.6.0",
"awesome-typescript-loader": "^3.0.0-beta.18",
"css-loader": "^0.26.1",
"extract-text-webpack-plugin": "2.0.0-beta.5",
"html-webpack-plugin": "^2.16.1",
"file-loader": "^0.10.0",
"html-loader": "^0.4.3",
"style-loader": "^0.13.1",
"postcss-loader": "1.2.2",
"webpack": "2.2.1",
"webpack-dev-server": "2.3.0",
"webpack-merge": "^2.6.1"

}

Я пытался решить это в течение нескольких дней. Буду признателен за любую оказанную помощь.


person Lee Matthews    schedule 10.02.2017    source источник
comment
Я удалил свой ответ, попробуйте изменить конфигурацию на основе примеров плагинов. github.com/jtangelder/sass-loader   -  person Ben Richards    schedule 10.02.2017
comment
Глядя на примеры плагинов, я изменил конфигурацию своего веб-пакета на { test: /\.scss$/, loader: ExtractTextPlugin.extract({ loader: [{ loader: css-loader }, { loader: sass-loader }], fallbackLoader : style-loader }) } Теперь я получаю эту ошибку. Ожидается, что 'styles' будет массивом строк. У меня есть компонент с этим styleUrls: ['./invoice-list.component.scss'], если я закомментирую его, ошибка исчезает   -  person Lee Matthews    schedule 10.02.2017
comment
Привет, Ли, установи raw-loader и используй до css-loader. Это должно решить проблему с Expected 'styles' to be an array of strings   -  person Ruaghain    schedule 10.02.2017
comment
добавил это и все равно получаю ту же ошибку... { test: /\.scss$/, loader: ExtractTextPlugin.extract({ loader: [{ loader: raw-loader }, { loader: css-loader }, { loader: sass-loader }], fallbackLoader: style-loader }) }   -  person Lee Matthews    schedule 10.02.2017
comment
Не могли бы вы попробовать настроить его, как показано ниже, и попробовать? Так же, как процесс устранения   -  person Ruaghain    schedule 10.02.2017
comment
Да, только что пробовал, получается так же. Мне интересно, есть ли у меня где-то другая проблема с совместимостью/синтаксисом, поскольку эти конфигурации, похоже, не работают для меня, но, похоже, согласуются с документацией, которую я нахожу.   -  person Lee Matthews    schedule 10.02.2017
comment
изменил мой компонент следующим образом, что устранило ошибку, но стили по-прежнему не применялись к странице @Component({templateUrl: './invoice-list.component.html', styles: ['./invoice-list.component.scss'] , провайдеры: [InvoiceService, SortTableComponent]})   -  person Lee Matthews    schedule 10.02.2017
comment
Возможно, стоит посмотреть, включаются ли стили или они просто полностью игнорируются. Если вы ищете селектор для вашего компонента в сгенерированном файле .js. В моем случае у меня это: selector: 'cash-header',\n styles: [__webpack_require__(611)],\n. Найдите номер 611 (или что-то еще в вашем экземпляре) и посмотрите, найдет ли он информацию CSS для связанной функции с этим номером в комментариях над ним.   -  person Ruaghain    schedule 10.02.2017


Ответы (2)


Вот пример, который работает для меня в отношении использования scss. Важно отметить, что я не компилирую полученный css в отдельный файл. Он генерируется как модуль в моем результирующем файле js:

  {
    test: /\.(scss)$/,
    loaders: [
      'raw-loader',
      'sass-loader'
    ]
  }
person Ruaghain    schedule 10.02.2017

Итак, я нашел ответ. Похоже, что документы angular устарели, как и документы webpack.

Я закончил с этим как с моим рабочим файлом конфигурации...

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var helpers = require('./helpers');

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

  resolve: {
    extensions: ['.ts', '.js', '.json', '.css', '.scss', '.html']
  },

  module: {
    rules: [
      {
        test: /\.ts$/,
        loaders: [{
          loader: 'awesome-typescript-loader',
          options: { configFileName: helpers.root('src', 'tsconfig.json') }
        },
        'angular2-template-loader']
      },
      {
        test: /\.html$/,
        loader: 'html-loader'
      },
      {
        test: /\.(png|jpg|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
        loader: 'file-loader?name=assets/[name].[hash].[ext]'
      },
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract({ loader: [{ loader: "css-loader" }, { loader: "postcss-loader" } ]})
      },
      {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract({ loader: [{ loader: "css-loader" }, { loader: "sass-loader" } ] })
      }
    ]
  },

  plugins: [
    new ExtractTextPlugin({ filename: 'css/[name].css', disable: false, allChunks: true }),
    // Workaround for angular/angular#11580
    new webpack.ContextReplacementPlugin(
      // The (\\|\/) piece accounts for path separators in *nix and Windows
      /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
      helpers.root('./src'), // location of your src
      {} // a map of your routes
    ),

    new webpack.optimize.CommonsChunkPlugin({
      name: ['app', 'vendor', 'polyfills']
    }),

    new HtmlWebpackPlugin({
      template: 'src/index.html'
    })
  ]
};

Затем я добавил операторы require в файл app.component.ts для глобальных требований css, а затем использовал атрибут стилей для вложенных компонентов для специфического стиля компонента.

person Lee Matthews    schedule 13.02.2017