Невозможно импортировать файлы sass в ответ

Question

Я использую следующий шаблон: https://github.com/spravo/typescript-react-express

Я разработал первый компонент: Button

import * as React from 'react';

import './button.scss';

export interface IButton {
  value: string;
  onClick: () => void;
}

class Button extends React.Component<IButton, {}> {
  public render () {
    return (
      <div className='Button'>
        <button onClick={this.props.onClick} className='Button__btn'>
          {this.props.value}
        </button>
      </div>
    );
  }
}

export default Button;

И в button.scss у меня есть эта простая строка:

.Button {
  background-color: red;
}

Но я получаю следующую ошибку:

(function (exports, require, module, __filename, __dirname) { .Button {

SyntaxError: Unexpected token .

Это мой конфиг веб-пакета (такой же, как в репозитории), за исключением config.common.js длямиграция веб-пакета:

'use strict';

const path = require('path');
const webpack = require("webpack");

const config = require('../config')(process.env.NODE_ENV);
const vendors = require('./vendor');

const NODE_ENV = process.env.NODE_ENV || 'development';

module.exports = function getConfig(dirname) {
  return {
    target: 'web',
    context: path.resolve(dirname),
    stats: {
      chunks: false,
      colors: true,
    },
    entry: {
      vendor: vendors
    },
    resolve: {
      extensions: [ '.ts', '.tsx', '.js', '.scss', '.css' ],
      modules: [
        path.resolve(__dirname, '..', 'src'),
        path.resolve(__dirname, '..', 'node_modules'),

      ]
    },
    output: {
      path: config.PUBLIC_FOLDER,
      filename: '[name].[hash].js',
      chunkFilename: '[name].[chunkhash].js',
      publicPath: config.PUBLIC_PATH
    },
    module: {
      rules: []
    },
    optimization:{
      splitChunks:{
        name: 'vendor'
      }
    },
    plugins: [
      new webpack.NoEmitOnErrorsPlugin(),
      // new webpack.optimize.CommonsChunkPlugin({
      //   name: 'vendor'
      // }),
      new webpack.DefinePlugin({
        'process.env': {
          NODE_ENV: JSON.stringify(NODE_ENV)
        },
        __CLIENT__: true,
        __SERVER__: false,
        __DEV__: NODE_ENV === 'development',
        __TEST__: false
      })
    ]
  };
};

Загрузчики Css:

'use strict';

const isDevelopment = (process.env.NODE_ENV || 'development') === 'development';
const autoprefixer = require('autoprefixer');


module.exports = {
  scssLoader: [
    {
      loader: 'css-loader',
      options: {
        minimize: !isDevelopment,
        sourceMap: isDevelopment
      }
    },
    {
      loader: 'postcss-loader',
      options: {
        sourceMap: isDevelopment,
        plugins: [
          autoprefixer({
            browsers:['ie >= 8', 'last 4 version']
          })
        ]
      }
    },
    {
      loader: 'sass-loader',
      options: {
        sourceMap: isDevelopment  
      }
    }
  ]
};

Кажется, что работает только scss в файле styles / index.scss, но я не понимаю, почемуне принимает другие файлы scss.

My tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "baseUrl" : "./src",
    "target": "es5",
    "jsx": "react",
    "alwaysStrict": true,
    "sourceMap": true,
    "outDir": "dist",
    "lib": [
      "dom",
      "es2015",
      "es5",
      "es6"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "typings"
  ],
  "exclude": [
    "node_modules"
  ]
}

Answer 1

Действительно странно, что ваш конфиг веб-пакета "module.rules" - это пустой массив!Вот где должны быть добавлены ваши настройки загрузчика.

На вашем месте я бы скопировал содержимое файла конфигурации css-loaders и вставил бы его в ваш файл webpack.config.js.Убедитесь, что вы храните его в обычной переменной / объекте вместо module.exports.

Вот так выглядит моя конфигурация веб-пакета:

const styleLoader = {
  test: /\.(scss)$/,
  include: path.resolve(__dirname, 'src'),
  use: ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use: [
      {
        loader: 'css-loader',
        options: {
          sourceMap: true,
          minimize: true
        }
      }, {
        loader: 'postcss-loader',
        options: {
          sourceMap: true,
          config: {
            path: path.join(__dirname, 'postcss.config.js')
          }
        }
      }, {
        loader: 'sass-loader',
        options: { sourceMap: true }
      }
    ]
  })
};

И тогда моя конфигурация веб-пакета выглядит следующим образом.Обратите внимание на раздел modules.rules:

module.exports = {
  entry: {
    app: ['babel-polyfill', 'whatwg-fetch', srcPath('index.js')],
    silentrenew: [srcPath('silentrenew.js')]
  },
  output: {
    path: path.resolve(__dirname, 'build'),
    publicPath: '/',
    filename: '[name].js'
  },
  devtool: 'source-map',
  plugins: [
    htmlPlugin('index.html', 'app'),
    new ExtractTextPlugin('bundle.css'),
  ],
  module: {
    rules: [
      babelLoader,
      fontLoader,
      svgLoader,
      styleLoader
    ]
  }
};