Question

我已经阅读了很多教程，门票等，我只是无法解决它... 我有一个带有webpack的React项目。我尝试使用.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"
  },

Answer 1

通过webpack develeoper本身在Twitter上得到答案！这是我自己的愚蠢。我还在学习webpack等，我忘了webpack是如何工作的。它构建了一个依赖的树，所以逻辑上它需要以某种方式知道scss文件...所以我告诉我的输入点（app.js）每个需要关于我的scss文件和TADA。它去了。我没有想过这一点，因为所有使用ExtractTextPlugin的教程都会解释它收集所有scss文件并从中生成单个css。所以我就像“哦，它从我的文件夹中收集了所有的scss文件。很好！”但是是啊...不，它从树上收集它而不是磁盘：p

带有ExtractTextPlugin的webpack-dev-server不会生成scss文件的css

1 个答案: