Reactjs 如何在React/webpack项目中使用sass？

我以前用导入的方式使它工作

import sass from '../scss/application.scss';

这是上面提到的错误的进口类型吗

现在它给了我以下的错误

在./app/components/Landing.js模块中找不到错误：错误：无法 解析“/Users/sam/Desktop/talkingwith/talkingwith”中的“样式” 中断更改：不再允许省略'-loader'后缀 使用装载机时。 您需要指定“样式加载器”而不是“样式”。@/app/components/Landing.js 13:19-54@./app/app.js@ 多（网页包）-开发服务器/客户端/app/app.js

不确定我现在如何在我的组件中使用SASS

编辑：我的网页包文件

var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');


var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
  template: __dirname + '/app/index.html',
  filename: 'index.html',
  inject: 'body'
});

module.exports = {
  entry: [
    './app/App.js'
  ],
  output: {
    path: __dirname + '/public',
    filename: "bundle.js"
  },
  plugins: [HTMLWebpackPluginConfig],
  devServer: {
       inline:true,
       contentBase: './public',
       port: 3333
     },
  module: {
    loaders: [{ 
         test: /\.js$/, 
         exclude: /node_modules/, 
         loader: "babel-loader"
      },
        {
              test: /\.scss$/,
              loader: 'style!css!sass'
            }]
  }
};

试一试

在网页包配置中

{
    test: /\.scss$/,
    loaders: [
        'style',
        'css',
        'sass'
    ]
}

---

我不是100%确定您使用的是什么sass库。对我来说真正有效的是使用节点sass库和sass加载程序。 同时，将sass加载器与css加载器和样式加载器一起使用也是一种很好的做法。（如下例所示）

使用sass加载器，您的webpack.config.js将如下所示

var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');


var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
  template: __dirname + '/app/index.html',
  filename: 'index.html',
  inject: 'body'
});

module.exports = {
  entry: [
   './app/App.js'
  ],
  output: {
   path: __dirname + '/public',
   filename: "bundle.js"
  },
  plugins: [HTMLWebpackPluginConfig],
  devServer: {
    inline:true,
    contentBase: './public',
    port: 3333
  },
  module: {
    loaders: [
     { 
      test: /\.js$/, 
      exclude: /node_modules/, 
      loader: "babel-loader"
     },
     { 
      test: /\.scss$/, 
      loaders: ["style-loader", "css-loader", "sass-loader"] 
     }
   ]
  }
};

更新webpack.config.js后，首先需要在入口点js文件中使用.scss文件，例如App.js

require('path/to/your/style.scss');

---

我想我会发布我最终使用的解决方案

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

---

与错误状态类似，您需要为样式指定寿命。网页包配置文件是什么样子的？添加了viewtry

loader的网页包文件：“样式加载器！”！css加载器！萨斯加载器！”这正是我正在使用的。奇怪的是，我两周前的项目在这个完全相同的网页配置下运行良好，但这个在加载程序上失败了。我试试看，没用。只是似乎无法将我的SASS与此特定项目的任何组件一起包含。只是要在您的入口点js文件中澄清，您使用的是require还是import语句？在您的帖子中，您使用的是导入语句，您是否尝试要求使用scss文件？你是否在所有加载器中添加了加载器后缀，但添加后缀仍然会产生相同的错误？
  {
     test: /\.scss$/,
     loader: 'style-loader!css-loader!sass-loader'
  }