javascript - 为什么我的 Webpack Sass 配置不起作用？

Question

我正在尝试在我的 Webpack 项目中设置 Sass 加载。

我已经安装了 node-sass、sass-loader、css-loader 和 style-loader >，正如您从我的 package.json 依赖项中看到的:

//...
"dependencies": {
  "babel-core": "^6.14.0",
  "babel-loader": "^6.2.5",
  "babel-preset-es2015": "^6.14.0
  "babel-preset-react": "^6.11.1"
  "express": "^4.14.0",
  "react": "^15.3.1",
  "react-dom": "^15.3.1",
  "webpack": "^1.13.2",
  "webpack-dev-middleware": "^1.6
},
"devDependencies": {
  "css-loader": "^0.24.0",
  "node-sass": "^3.8.0",
  "sass-loader": "^4.0.0",
  "style-loader": "^0.13.1",
  "webpack": "^1.13.2",
  "webpack-validator": "^2.2.7"
}
//...

我已在 webpack.config.js 中添加了加载器:

//...
module: {
  loaders: [
    {
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loaders: ['babel'],
    },
    {
      test: /\.scss$/,
      loaders: ["style", "css", "sass"]
    },
  ],
},
//...

...并将其添加到我的 ma​​in.js 中:

import '../stylesheets/main.scss';

该 SCSS 文件包含一些简单、明显的颜色更改:

button {
  background-color: red;
  color: white;
}

body {
  background-color: blue;
}

当我启动服务器时，我最后得到以下输出:

  [174] ./stylesheets/main.scss 1.02 kB {0} [built]
  [175] ./~/css-loader!./~/sass-loader!./stylesheets/main.scss 250 bytes {0} [built]
  [176] ./~/css-loader/lib/css-base.js 1.51 kB {0} [built]
  [177] ./~/style-loader/addStyles.js 7.15 kB {0} [built]
webpack: bundle is now VALID.

这似乎表明我的 CSS 正在得到适当的处理。但在浏览器中，没有任何 CSS 的证据。页面上看不到任何更改，检查器中看不到任何样式。我不确定我还应该寻找什么。

我错过了重要的一步吗？我还应该尝试什么才能让它发挥作用？

Answer 1

我的 CSS 配置是正确的。此问题似乎是由早期手动编译留下的过时的 bundle.js 副本引起的，该副本正在加载，而不是开发服务器上的当前版本。当我删除该文件时，它立即起作用。