webpack-dev-server с ExtractTextPlugin не генерирует CSS-файл scss

Я уже прочитал ТАК чертовски много уроков, билетов и т.д., и я просто не могу решить это... У меня есть проект React с webpack. И я пытаюсь использовать файлы.scss для стиля. Итак, у меня есть этот webpack.config.js:

var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    devServer: {
        contentBase: "./src"
    },
    entry: [
        'babel-polyfill',
        './src/app'
    ],
    output: {
        publicPath: '/',
        filename: 'app.bundle.js'
    },
    devtool: 'source-map',
    module: {
        loaders: [
            //Babel
            {
                test: /\.js$/,
                include: path.join(__dirname, 'src'),
                loader: 'babel-loader',
                query: {
                    presets: ["es2015", "react"],
                }
            },
            //Sass
            {
                test: /\.scss$/,
                loader: ExtractTextPlugin.extract('css!sass')
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin('src/style.css', {
            allChunks: true
        })
    ],
    debug: true
};

И App.scssФайл в src/:

body {
  margin: 20px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

h1 {
  color: pink;
}

h2 {
  color: greenyellow;
}

Чем по моему index.html Я включаю файл CSS:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Aline</title>
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="style.css"/>
  </head>
  <body >
    <div id="content"></div>
    <script src="../app.bundle.js"></script>
  </body>
</html>

Чем я звоню webpack-dev-server --inline --hot --quiet, Chrome всегда говорит мне, что не может найти файл css, и кажется, что webpack просто не заботится о моем файле scss....

мои зависимости package.json будут:

"devDependencies": {
    "babel-core": "6.17.0",
    "babel-loader": "6.2.5",
    "babel-plugin-transform-runtime": "6.15.0",
    "babel-preset-es2015": "6.16.0",
    "babel-preset-react": "6.16.0",
    "babel-runtime": "6.11.6",
    "css-loader": "0.25.0",
    "extract-text-webpack-plugin": "1.0.1",
    "node-sass": "3.10.1",
    "sass-loader": "4.0.2",
    "style-loader": "0.13.1",
    "webpack": "1.13.2",
    "webpack-dev-server": "1.16.2"
  },
Источник

1 ответ

Получил ответ в твиттере от самого разработчика вебпака! Это была моя собственная глупость. Я все еще изучаю webpack и т.д., и я забыл, как работает webpack. Он строит дерево из зависимостей, так что логически ему нужно каким-то образом знать файлы scss... поэтому я рассказал моей точке входа (app.js) о требовании о моем файле scss и TADA. Там идет. Я не думал об этом, потому что все учебники, использующие ExtractTextPlugin, объясняют, как он собирает все файлы scss и делает из них один CSS. Таким образом я был как "о, он собирает все мои файлы scss из моих папок. Хорошо!" Но да... нет XD он собирает его с дерева, а не с диска:p

Источник
Другие вопросы по тегам