Добавьте загрузчик sass в веб-пакет, уже используя ответ

Question

У меня есть эта конфигурация в моем веб-пакете, и мне нужно добавить sass-загрузчик, я уже добавил зависимости, используя npm install sass-loader sass webpack --save-dev

Но я запутался, когда я включил загрузчик sass и настройки документации. Теперь, как добавить в мой веб-пакет?

'use strict'

const path = require('path')
const webpack = require('webpack')
const validate = require('webpack-validator')

module.exports = validate({
    devtool: 'source-map',

    entry: [
        'react-hot-loader/patch',
        'webpack-dev-server/client?http://localhost:3000',
        'webpack/hot/only-dev-server',
        path.join(__dirname, 'src', 'index'), 
    ],

    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js',
        publicPath: '/dist/'
    },

    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ],

    module: {
        preLoaders: [{
            test: /\.js$/,
            exclude: /node_modules/,
            include: /src/,
            loader: 'standard'
        }],
        loaders: [{
            test: /\.js$/,
            exclude: /node_modules/,
            include: /src/,
            loader: 'babel'
        }],

    }

})

Answer 1

Я предполагаю, что вы хотите добавить sass-loader для поддержки файлов s css. Добавьте новый элемент в массив loaders / rules:

Если вы используете веб-пакет

loaders:[
  ..., 

  {
        test: /\.(scss|sass)$/,
        loader: 'style-loader!css-loader!sass-loader'
  }
]

Для веб-пакета> v3, добавьте правило, подобное этому:

rules:[
..., 
   {
        test: /\.(scss|sass)$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader',
        ],
    }
]

Подробнее см. Здесь https://webpack.js.org/loaders/sass-loader/