reactjs - 如何在我的 React/webpack 项目中使用 sass？

Question

我之前通过使用

导入它来工作

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

Is this the wrong type of import above?

现在它给了我以下错误......

ERROR in ./app/components/Landing.js Module not found: Error: Can't resolve 'style' in '/Users/sam/Desktop/talkingwith/talkingwith' BREAKING CHANGE: It's no longer allowed to omit the '-loader' suffix when using loaders. You need to specify 'style-loader' instead of 'style'. @ ./app/components/Landing.js 13:19-54 @ ./app/App.js @ multi (webpack)-dev-server/client?http://localhost:3333 ./app/App.js

现在不知道如何在我的组件中使用 SASS。

编辑:我的 webpack 文件

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'
            }]
  }
};

Answer 1

我不是 100% 确定你正在使用什么 sass 库。对我来说真正有效的是使用node-sass库和sass-loader。 https://github.com/jtangelder/sass-loader 将 sass-loader 与 css-loader 和 style-loader 一起使用也是一个很好的做法。 (如我下面的示例)

使用 sass-loader 你的 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');