ReactJS - включая другие файлы scss в main.scss

В моем приложении activJS - я включаю все файлы.scss в один файл main.scss - в папку стилей в папке src. У меня есть следующая конфигурация webpack. Попытался включить файл main.scss непосредственно в мой основной компонент - получая ошибку в @import, где я импортирую другие файлы scss. если я включаю отдельные стили файла scss, то все в порядке - но как заставить это работать с одним файлом main.scss и как включить его?

ошибка: ожидается неожиданный токен ((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));
  });
}
Источник

4 ответа

Вы должны импортировать ваш .scss файл через JavaScript в вашем компоненте React верхнего уровня.

import './styles/main.scss';

Затем Webpack включит его в ваш пакет.

Для производства вы захотите использовать плагин Extract Text для веб-пакета, который будет экспортировать отдельный файл CSS из оператора импорта.

Источник

Webpack работает на .js файлы. Вам нужно конвертировать ваши .scss в .css файл с использованием ExtractTextPlugin:

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

Установите для этого точку входа вашего веб-пакета в каталог, в которомmain.scss файл живет, затем создайте index.js в этом каталоге со следующей строкой:

require("./main.scss") (или же import ./main.scss)

Путь, который вы включаете здесь: <link rel="stylesheet" type="text/css" href="./styles/main.scss"> должен быть путь к сгенерированному .css файл.

Источник

Ниже настройки работают на меня.

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/
  }

в топ index.js

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

пример 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";
Источник

Я просто импортировал бы их так, как вы делаете, и не использовал бы идентификаторы или имена классов, если вы не хотите, чтобы стили были одинаковыми, поэтому:

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

Вот так и так далее

Источник
Другие вопросы по тегам