Reactjs 网页包中的Sass

Reactjs 网页包中的Sass,reactjs,ecmascript-6,webpack,sass-loader,Reactjs,Ecmascript 6,Webpack,Sass Loader,这是我第一次使用,我不明白为什么没有加载我的sass文件(.scss)。我整个下午都在尝试和搜索,但我不明白我的代码中有什么错误 webpack.config.js module.exports = { entry: "./main.js", output: {path: __dirname, filename: "bundle.js"}, module: { loaders: [ { test: /.jsx?$/,

这是我第一次使用,我不明白为什么没有加载我的sass文件(.scss)。我整个下午都在尝试和搜索,但我不明白我的代码中有什么错误

webpack.config.js

module.exports = {
   entry: "./main.js",
   output: {path: __dirname, filename: "bundle.js"},
   module: {
     loaders: [
       {
         test: /.jsx?$/,
         loader: "babel-loader",
         exclude: /node_modules/,
         query: {
           presets: ["es2015", "react"]
         }
       },
       {
         test: /\.css$/,
         loader: "css-loader!autoprefixer-loader"
       },
       {
         test: /\.scss$/,
         loader: "css-loader!sass-loader"
       }
     ]
   }
 };
package.json依赖项:

//...
"dependencies": {
    "react": "^0.14.7",
    "react-dom": "^0.14.7",
    "react-redux": "^4.4.0",
    "redux": "^3.3.1",
    "webpack-dev-server": "^1.14.1"
  },
  "devDependencies": {
    "autoprefixer-loader": "^3.2.0",
    "babel-core": "^6.6.5",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "css-loader": "^0.23.1",
    "node-sass": "^3.4.2",
    "redux-devtools": "^3.1.1",
    "sass-loader": "^3.1.2",
    "webpack": "^1.12.14"
  }
 //...
在我的app.js中,我添加了这一行:

import "./app/sass/app.scss";
终端和Chrome控制台中都没有错误但未加载SASS文件。

我的代码有什么问题?


谢谢

您还必须安装
样式加载器
css加载器
sass加载器

要执行此操作,请运行:
npm i css加载器样式加载器sass加载器--保存开发

然后,将加载程序添加到您的网页包配置中

// ...
    {
      test: /\.scss$/,
      loader: 'style!css!sass'
    }]
// ...

您走的路很好,不过您还必须安装
样式加载程序
css加载程序
sass加载程序

要执行此操作,请运行:
npm i css加载器样式加载器sass加载器--保存开发

然后,将加载程序添加到您的网页包配置中

// ...
    {
      test: /\.scss$/,
      loader: 'style!css!sass'
    }]
// ...

虽然您的
import
看起来很可疑,但您走的路很好。它需要与app.js文件相关。
app.js
是否与您的
app
目录处于同一级别?您的
import
看起来可疑。它需要与app.js文件相关。
app.js
是否与您的
app
目录处于同一级别?好的,我忘记安装
style loader
。现在工作得很好!!非常感谢你!好的,我忘记安装
样式加载器了。现在工作得很好!!非常感谢你!