SCSS文件未导入create-react-app

问题描述 投票:2回答:2

我正在使用React cli create-react-app并尝试从UI库http://react-conventions.herokuapp.com/加载.scss文件。 我已经运行npm run eject并将以下内容添加到config.dev loaders中,我也已经下载了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';来导入我的组件import Input from 'react-conventions/lib/Input'; 但我仍然遇到错误

编译失败。

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

图书馆可能有问题吗? 令人怀疑,但我只是看不到我所缺少的。

reactjs webpack create-react-app
2个回答
2
投票

尝试以下操作(排除负前瞻):

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

1
投票

尝试将其添加到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,因为脚本依赖它。 假设您还没有弹出项目,这将起作用。

© www.soinside.com 2019 - 2024. All rights reserved.