时间戳

首页 > 解决方案 > 在反应项目中使用引导程序配置 scss 的问题

reactjs - 在反应项目中使用引导程序配置 scss 的问题

问题描述

我正在学习反应，目前面临在项目中使用引导程序配置 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)

标签： reactjswebpacksassbootstrap-4

解决方案

要达到预期的结果，请使用以下选项以使用以下格式的加载器

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

推荐阅读