ReactJS - y compris d'autres fichiers scss dans main.scss

Question

Dans mon application reactJS - j'inclue tous les fichiers .scss dans un fichier main.scss - sous le dossier styles dans le dossier src. J'ai la configuration de webpack suivante. essayé d'inclure le fichier main.scss directement dans mon composant principal - obtenir l'erreur à '@ import' où j'importe d'autres fichiers scss. si j'insère des styles de fichiers scss distincts, ça va - mais comment faire fonctionner ça avec un fichier main.scss et comment l'inclure?

erreur: jeton inattendu, attendus ((1: 8)

1 | @import 'mycomponent';

module.exports = { 
    entry: [ 
    'webpack-hot-middleware/client', 
    path.resolve(__dirname, 'src'), 
    ], 
    output: { 
    path: path.resolve(__dirname, 'src'), 
    filename: 'bundle.js', 
    publicPath: '/', 
    }, 
    plugins: [ 
    new ExtractTextPlugin('bundle.css', { allChunks: true }), 
    new webpack.HotModuleReplacementPlugin(), 
    new webpack.NamedModulesPlugin(), 
    new webpack.DefinePlugin({ 
     'process.env': { 
     NODE_ENV: JSON.stringify('development'), 
     WEBPACK: true, 
     }, 
    }), 
    ], 
    module: { 

    rules: [ 
     { 
     enforce: 'pre', 
     test: /\.js$/, 
     exclude: /node_modules/, 
     loader: 'eslint-loader', 
     }, 
     { 
     test: /\.js$/, 
     exclude: /node_modules/, 
     use: { 
      loader: 'babel-loader', 
      query: { 
      presets: ['react-hmre'], 
      }, 
     }, 
     include: path.resolve(__dirname, 'src'), 
     }, 
    { 
    use: ExtractTextPlugin.extract({ 
     fallback: "style-loader", 
     use: [ 
     'css-loader', 
     'sass-loader?outputStyle=expanded'. 
     ] 
    }), 
    test: /\.scss$/, 
    exclude: /node_modules/ 
    } 
    ], 
    }, 
}; 

index.js

import React from 'react'; 
import { render } from 'react-dom'; 
import { createBrowserHistory } from 'history'; 
import { ConnectedRouter, routerMiddleware } from 'react-router-redux'; 
import { Provider } from 'react-redux'; 
import { createStore, applyMiddleware } from 'redux'; 
import App from './components/homepage'; 
import reducers from './reducers'; 
import '../styles/main.scss'; 


const history = createBrowserHistory(); 
const store = createStore(reducers, applyMiddleware(routerMiddleware(history))); 

render(
    <Provider store={store}> 
    <ConnectedRouter history={history}> 
     <App /> 
    </ConnectedRouter> 
    </Provider> 
    , document.getElementById('app')); 

if (process.env.NODE_ENV === 'development' && module.hot) { 
    module.hot.accept(); 
    module.hot.accept('./reducers',() => { 
    const nextRootReducer = require('./reducers').default; // eslint-disable-line global-require 
    store.replaceReducer(nextRootReducer(store.asyncReducers)); 
    }); 
} 

Answer 1

Vous devez importer votre fichier .scss via javascript dans votre haut niveau React composant

import './styles/main.scss';

Webpack l'inclut ensuite dans votre offre groupée.

Pour la production, vous devez utiliser le Extract Text Plugin pour webpack qui exportera un fichier css distinct de l'instruction import.

Answer 2

Webpack fonctionne sur les fichiers .js. Vous devez convertir votre .scss dans un fichier .css en utilisant le ExtractTextPlugin:

{test: /\.scss$/, 
    use: ExtractTextPlugin.extract({ 
     fallback: "style-loader", 
     use: [{ 
      loader: "css-loader" // translates CSS into CommonJS 
     }, { 
      loader: "sass-loader" 
     }] 
    }) 
} 

Définissez votre point d'entrée de webpack pour que cela le répertoire dans lequel votre main.scss vie de fichier, puis créer un index.js dans ce répertoire avec la ligne suivante:

require("./main.scss") (ou import ./main.scss)

le chemin que vous indiquez: <link rel="stylesheet" type="text/css" href="./styles/main.scss"> devrait être le chemin vers le fichier généré .css.

Answer 3

Les réglages ci-dessous fonctionnent pour moi.

webpack.config.js

{ 
    use: ExtractTextPlugin.extract({ 
     fallback: "style-loader", 
     use: [ 
     'css-loader', //knows how to deal with css 
     'autoprefixer-loader?browsers=last 3 versions', 
     'sass-loader?outputStyle=expanded' //this one is applied first. 
     ] 
    }), 
    test: /\.scss$/, 
    exclude: /node_modules/ 
    } 

dans les index.js top

import "./styles/main.scss"; 
import "./reactApp"; 

exemple de main.scss

// Import any of your custom variables for bootstrap here first. 
@import "my-theme/custom"; 
// Then, import bootstrap scss 
@import "~bootstrap/scss/bootstrap"; 
//for bootstrap 3 using bootstrap-sass 
$icon-font-path: '~bootstrap-sass/assets/fonts/bootstrap/'; 
@import '~bootstrap-sass/assets/stylesheets/_bootstrap.scss'; 
// Finally import any custom styles. 
@import "my-theme/master-theme"; 

Answer 4

Je voudrais simplement les importer la façon dont vous êtes faire et ne pas réutiliser les noms d'id ou de classe, sauf si vous voulez que les styles soient les mêmes, donc:

import '../styles/main1.scss'; 
import '../styles/main2.scss'; 
.... 

comme ça et ainsi de suite