Question

我正在学习反应，目前在项目中使用引导程序配置scss时遇到了问题，该项目最初是由我的朋友构建的，现在我要进行此工作。当我将其配置为引导时，它工作正常。但是，当我尝试配置scss时，出现以下类型错误。

1 ）这是终端错误

ERROR in ./client/styles/styles.scss
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.
| @import '~bootstrap/scss/bootstrap.scss';
| $btn-font-weight:bold;
|
 @ ./client/App.js 17:0-31
 @ ./client/main.js
 @ multi react-hot-loader/patch webpack-hot-middleware/client?reload=true ./client/main.js

2 /这是我的webpack.config文件：

const path = require('path')
const webpack = require('webpack')
const CURRENT_WORKING_DIR = process.cwd()

const config = {
    name: "browser",
    mode: "development",
    devtool: 'eval-source-map',
    entry: [
        'react-hot-loader/patch',
        'webpack-hot-middleware/client?reload=true',
        path.join(CURRENT_WORKING_DIR, 'client/main.js')
    ],
    output: {
        path: path.join(CURRENT_WORKING_DIR , '/dist'),
        filename: 'bundle.js',
        publicPath: '/dist/'
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                use: [
                    'babel-loader'
                ]
            }, {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]

            },
            {
                test: /\.scss$/, 
                loaders: [ 'style-loader', 'css-loader', 'sass-loader' ]
            },
            {
                test: /\.(ttf|eot|svg|gif|jpg|png)(\?[\s\S]+)?$/,
                use: 'file-loader'
            }
        ]
    },  plugins: [
          new webpack.HotModuleReplacementPlugin(),
          new webpack.NoEmitOnErrorsPlugin()
      ]
}

module.exports = config

3 ）这是我的app.js文件

import React from 'react'
import MainRouter from './MainRouter'
import {BrowserRouter} from 'react-router-dom'
import './styles/styles.scss';
import { hot } from 'react-hot-loader';


const App = () => (
  <BrowserRouter>
    <MuiThemeProvider>
      <MainRouter/>
    </MuiThemeProvider>
  </BrowserRouter>
)

export default hot(module)(App)

Answer 1

要获得预期的结果，请使用以下选项，使用以下格式的装载机

use: [ { loader: 'style-loader' }, { loader: 'css-loader' }, { loader: 'sass-loader' } ]

在React项目中使用引导配置scss的问题

1 个答案: