Question

在尝试使用SASS与webpack和react.js

时，我得到的似乎是缺少加载程序错误

我修改了webpack中的代码：

// webpack.config.js
var webpack = require('webpack')

if(process.env.NODE_ENV === 'development'){
  var loaders = ['react-hot','babel']
} else {
  var loaders = ['babel']
}
module.exports = {
  devtool: 'eval',
  entry: './app-client.js',
  output: {
    path: __dirname + '/public/dist',
    filename: 'bundle.js',
    publicPath: '/dist/'
  },
  module: {
    loaders: [{
      test: /\.js$/,
      loaders: loaders,
      exclude: /node_modules/
    },
    { 
     test: /\.scss$/, 
     loaders: ["style", "css", "sass"] 
    }
  ]},
  plugins: [
    new webpack.DefinePlugin({
      'process.env.COSMIC_BUCKET': JSON.stringify(process.env.COSMIC_BUCKET)
    })
 ]
};

在./components/App.js内我有以下内容：

//styles
import style from '../styles/footer.scss'

在./components/partials/Footer.js内，我将className值修改为以下内容：<footer className={ style.foo }>。但是现在页面加载空白，出现以下错误：

Footer.js:28 Uncaught (in promise) ReferenceError: style is not defined

然后我在Footer.js组件中移动了导入：

import style from '../../styles/footer.scss'

但现在我得到了： ReactReconciler.js:54 Uncaught TypeError: Cannot read property 'getNativeNode' of null

我在哪里导入样式？

Answer 1

带走那里的sass，你的配置应该是这样的

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

您可能需要适当的加载程序来处理此文件类型

1 个答案: