1

我已经阅读了太多该死的教程、票证等，但我无法解决它……我有一个带有 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"
  },
4

1 回答 1

-1

由 webpack 开发者自己在 Twitter 上得到了答案！这是我自己的愚蠢。我还在学习 webpack 等，我忘记了 webpack 是如何工作的。它从依赖关系中构建了一棵树，因此从逻辑上讲，它需要以某种方式了解 scss 文件......所以我根据需要告诉我的输入点（app.js）关于我的 scss 文件和 TADA。就这样。我没有想到这一点，因为所有使用 ExtractTextPlugin 的教程都解释了它收集所有 scss 文件并从中生成一个 css。所以我就像“哦，它从我的文件夹中收集了我所有的 scss 文件。太好了！” 但是是的......不，xD它从树而不是磁盘收集它：p

于 2016-10-28T09:13:12.613 回答