reactjs – 如何使用SCSS设置react应用程序？ (错误)

我正在尝试设置我的反应项目,所以我可以使用SCSS格式的SASS.

这是在我的webpack.config.dev.js中：

{
        test: /\.scss$/,exclude: /node_modules/,use: [
          require.resolve('style-loader'),{
            loader: require.resolve('css-loader'),options: {
              importLoaders: 1,},{
            loader: require.resolve('sass-loader'),}
        ]
      }

我以两种不同的方式将scss文件导入我的jsx：

import './index.scss';
import css from './ModalWrapper.scss';

当我运行应用程序时,我目前收到错误：

./src/index.scss
Module build Failed: 
body {
^
      Invalid CSS after "m": expected 1 selector or at-rule,was "module.exports = __"
      in /pathtoapp/web/src/index.scss (line 1,column 1)

看来我,那个,反应是试图将SCSS解释为应该起作用的CSS.另外,反应认为身体不是有效的CSS.在那里,我认为CSS或SCSS都没有正确加载.

任何帮助,将不胜感激.这个问题有很多未解决的问题.

解决方法

如果您在Webpack 3上,请将其添加到module.rules

{
    test: /\.scss$/,loader: [
      require.resolve('style-loader'),require.resolve('css-loader'),require.resolve('sass-loader'),]
},

然后添加文件加载器并确保将.scss添加到密钥排除的数组中

{
        loader: require.resolve('file-loader'),// Exclude `js` files to keep "css" loader working as it injects
        // it's runtime that would otherwise processed through "file" loader.
        // Also exclude `html` and `json` extensions so they get processed
        // by webpacks internal loaders.
        exclude: [/\.js$/,/\.html$/,/\.json$/,/\.scss$/,],options: {
          name: 'static/media/[name].[hash:8].[ext]',}

当然,请确保在package.json中有样式加载器,sass-loader,css-loader和文件加载器.在使用最新版本的create-react-app时,此代码段对我有用.