Question

我正在使用React cli create-react-app并尝试从UI库http://react-conventions.herokuapp.com/加载.scss文件。我已经运行npm run eject并将以下内容添加到loaders config.dev中我已经下载了sass-loader。

var path = require('path');
var autoprefixer = require('autoprefixer');
var webpack = require('webpack');
var findCacheDir = require('find-cache-dir');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
var InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
var WatchMissingNodeModulesPlugin = require('react-dev-   utils/WatchMissingNodeModulesPlugin');
var getClientEnvironment = require('./env');
var paths = require('./paths');

var publicPath = '/';

var env = getClientEnvironment(publicUrl);

module.exports = {

  entry: [

    require.resolve('react-dev-utils/webpackHotDevClient'),

    require.resolve('./polyfills'),

    paths.appIndexJs

  ],
  output: {

    path: paths.appBuild,

    pathinfo: true,

    filename: 'static/js/bundle.js',

    publicPath: publicPath
  },
  resolve: {

    fallback: paths.nodePaths,

    extensions: ['.js', '.json', '.jsx', ''],
    alias: {

      'react-native': 'react-native-web'
    }
  },

  module: {
    // First, run the linter.
    // It's important to do this before Babel processes the JS.
    preLoaders: [
      {
        test: /\.(js|jsx)$/,
        loader: 'eslint',
        include: paths.appSrc,
      }
    ],
    loaders: [
      // Process JS with Babel.
      {
        test: /\.(js|jsx)$/,
        include: paths.appSrc,
        loader: 'babel',
        query: {

          // This is a feature of `babel-loader` for webpack (not Babel itself).
          // It enables caching results in ./node_modules/.cache/react-scripts/
          // directory for faster rebuilds. We use findCacheDir() because of:
          // https://github.com/facebookincubator/create-react-app/issues/483
          cacheDirectory: findCacheDir({
            name: 'react-scripts'
          })
        }
      },
      // "postcss" loader applies autoprefixer to our CSS.
      // "css" loader resolves paths in CSS and adds assets as dependencies.
      // "style" loader turns CSS into JS modules that inject <style> tags.
      // In production, we use a plugin to extract that CSS to a file, but
      // in development "style" loader enables hot editing of CSS.
      {
        test: /\.css$/,
        loader: 'style!css?importLoaders=1!postcss'
      },
      {
        test: /\.scss$/,
        loaders: ["style", "css", "sass"],
        exclude: /node_modules(?!\/react-conventions)/
      },
      {
        test: /\.sass$/,
        loaders: ["style", "css", "sass"]
      },
      // JSON is not enabled by default in Webpack but both Node and Browserify
      // allow it implicitly so we also enable it.
      {
        test: /\.json$/,
        loader: 'json'
      },
      // "file" loader makes sure those assets get served by WebpackDevServer.
      // When you `import` an asset, you get its (virtual) filename.
      // In production, they would get copied to the `build` folder.
      {
        test: /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/,
        loader: 'file',
        query: {
          name: 'static/media/[name].[hash:8].[ext]'
        }
      },
      // "url" loader works just like "file" loader but it also embeds
      // assets smaller than specified size as data URLs to avoid requests.
      {
        test: /\.(mp4|webm|wav|mp3|m4a|aac|oga)(\?.*)?$/,
        loader: 'url',
        query: {
          limit: 10000,
          name: 'static/media/[name].[hash:8].[ext]'
        }
      }
    ]
  },

  // We use PostCSS for autoprefixing only.
  postcss: function() {
    return [
      autoprefixer({
        browsers: [
          '>1%',
          'last 4 versions',
          'Firefox ESR',
          'not ie < 9', // React doesn't support IE8 anyway
        ]
      }),
    ];
  },
  plugins: [

    new InterpolateHtmlPlugin({
      PUBLIC_URL: publicUrl
    }),
    // Generates an `index.html` file with the <script> injected.
    new HtmlWebpackPlugin({
      inject: true,
      template: paths.appHtml,
    }),

    new webpack.DefinePlugin(env),
    // This is necessary to emit hot updates (currently CSS only):
    new webpack.HotModuleReplacementPlugin(),

    new CaseSensitivePathsPlugin(),

    new WatchMissingNodeModulesPlugin(paths.appNodeModules)
  ],

  node: {
    fs: 'empty',
    net: 'empty',
    tls: 'empty'
  }
};

我尝试使用import Input from 'react-conventions/lib/Input';导入我的组件但是我仍然收到错误

编译失败。

./~/react-conventions/lib/components/Input/style.scss中的错误模块解析失败：/ Users / user / Desktop / App / node_modules / react-convention / lib / components / Input / style.scss意外字符'@'（1：0）您可能需要适当的加载程序来处理此文件类型。 SyntaxError：意外字符'@'（1：0） @ ./~/react-conventions/lib/components/Input/Input.js 19：13-36

这可能是图书馆的问题吗？令人怀疑，但我只是没有看到我失踪的东西。

Answer 1

试试这个（排除前瞻性负面）：

 {
    test: /\.scss$/,
    loaders: ["style", "css", "sass"],
    exclude: /node_modules(?!\/react-conventions)/
 }

Answer 2

尝试将此添加到package.json脚本

"scripts": {
"build-css": "node-sass src/ -o src/",
"watch-css": "npm run build-css && node-sass src/ -o src/ --watch --recursive"

并安装node-sass，因为脚本依赖于它。假设您还没有弹出项目，这将有效。

未在create-react-app

2 个答案: