импорт scss в компонент реагирования на SSR - PullRequest
0 голосов
/ 01 января 2019

Я работаю над скелетом, чтобы иметь (для себя или того, кто этого хочет) с webpack реагирует на экспресс и ssr (рендеринг на стороне сервера).

У меня проблема, когда я не могу импортировать scss вреагировать компоненты.

По какой-то причине я могу импортировать их в файлы, где я делаю ReactDOM.hydrate

Я перепробовал сотни различных конфигураций веб-пакетов, а также попытался сгенерировать один файл CSS,что я также не смог.

scss config

{
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader']
    }

package.json зависимости:

"@babel/core": "^7.2.2",
"@babel/plugin-proposal-class-properties": "^7.2.3",
"@babel/preset-env": "^7.2.3",
"@babel/preset-react": "^7.0.0",
"autoprefixer": "^9.4.3",
"babel-loader": "^8.0.4",
"clean-webpack-plugin": "^1.0.0",
"css-loader": "^2.1.0",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"html-webpack-plugin": "^3.2.0",
"isomorphic-style-loader": "^4.0.0",
"mini-css-extract-plugin": "^0.5.0",
"node-sass": "^4.11.0",
"nodemon": "^1.18.9",
"postcss-loader": "^3.0.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"url-loader": "^1.1.2",
"webpack": "^4.28.2",
"webpack-cli": "^3.1.2",
"webpack-node-externals": "^1.7.2"
"axios": "^0.18.0",
"express": "^4.16.4",
"react": "^16.7.0",
"react-dom": "^16.7.0"

Простой файл гидрата, гдеМне может потребоваться scss:

require('./index.scss');
const React = require('react');
const ReactDOM = require('react-dom');
const Search = require('./Search');

ReactDOM.hydrate(<Search text={window.__INITIAL__.text} />, 
document.getElementById('root'));

тот же компонент передан в гидрат, где я не могу добавить требование, потому что это нарушает компиляцию веб-пакета.

const React = require('react')
const Nav = require('../../components/nav/Nav.js')

class Search extends React.Component {
constructor(props) {
    super(props);

    this.state = {
        text: props.text || null,
    }
}

render() {
    return (
        <div id="main">
            <Nav />
            <p>{this.state.text}</p>
        </div>
    );
}
}

module.exports = Search;

Я пытаюсь получить require or import работать внутри каждого компонента, но пока не смог.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...