无法弄清楚webpack和ReactJS的sass加载器

Question

我想在我的ReactJS应用程序中使用.scss作为我的样式表.我有一个webpack配置文件css-loader , sass-loader, and style-loader.

我能够将css导入到我的app.js文件中import './test.css'但是我没有运气import './test.scss'吗？

这是我的package.json:

  "dependencies": {
    "react": "^15.0.2",
    "react-dom": "^15.0.2"
  },
  "devDependencies": {
    "babel-core": "^6.7.7",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "babelify": "^7.3.0",
    "checkbox.css": "^1.1.1",
    "css-loader": "^0.23.1",
    "eslint": "^2.9.0",
    "eslint-plugin-react": "^5.0.1",
    "html-webpack-plugin": "^2.16.1",
    "node-sass": "^3.7.0",
    "raw-loader": "^0.5.1",
    "sass-loader": "^3.2.0",
    "style-loader": "^0.13.1",
    "webpack": "^1.13.0",
    "webpack-dev-server": "^1.14.1"
  }

我的网站:

  module:{
    loaders:[
      {test:/\.js$/,exclude: /node_modules/, loader: 'babel-loader'},
      {test:/\.scss$/, loaders:['style','css','sass']},
      // {test:/\.css$/, loader: 'style!css', exclude: /node_modules/},
      {test:/\.html$/, loader: 'raw-loader'}
    ]
  },

****第3行被注释掉,因为我想出了如何加载CSS.**

在我的app.js

我已经尝试过require("!style!css!sass!./styles.scss"); 并尝试import './styles.scss'过但没有成功.

目前我的错误是 Uncaught Error: Cannot find module "./../../node_modules/css-loader/lib/css-base.js"

Answer 1

您的webpack配置没问题但是您缺少node-sass库以便能够使用sass-loader,如sass-loader文档中所示.

要修复它,请安装库

npm install node-sass --save-dev