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"]
    },
  ],
},
//...

...并将其添加到我的 main.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 副本引起的，该编译是在开发服务器上加载而不是当前版本。当我删除文件时，它立即起作用。

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

1 个答案: