Làm sao để không import 1 file chỉ định trong node/babel-node



  • HIện tại mình đang sử dụng React + Server Side Rendering.
    Câu chuyện ở đây là mình có import css trong Component. ví dụ như này.
    import React, { Component } from 'react'

    import '../../css/Common.css'

    Và khi chạy trên server thì nó dĩ nhiên nó sẽ báo lỗi ở file Common.css vì đó không phải cú pháp js mà là code css.
    Có cách nào khi chạy node hoặc babel node thì loại bỏ những file .css ko cần import không?

    Mình cảm ơn!



  • 1. Kiểm tra xem có đang hoạt động trên server ko bằng cách

    function is_server() {
    return ! (typeof window != 'undefined' && window.document);
    }

    2. Check server và require nó

    if (is_server() == false){
    require (something.css)
    }

    3. Đừng dùng import, dùng ES5 require, import ko hoạt động khi nest phía trong function



  • Cảm ơn anh. MÌnh đã tìm ra cách giải quyết rồi.

    // Tại file component react
    if (process.env.BROWSER) {
        require('../../scss/CurriculumVitae.scss')
    }
    
    // tại file webpack.config.babel.js
    plugins: [
            extractTextPlugin,
            new webpack.DefinePlugin({
                'process.env.NODE_ENV': JSON.stringify(env),
                'process.env.BROWSER': JSON.stringify(true)
            }),
            new OptimizeCssAssetsPlugin({
                assetNameRegExp: /\.(scss|css)$/
            })
        ]
    

    Edited: Sửa format theo cú pháp markdown



  • Nó hoạt động tương tự cách của anh hướng dẫn......


Log in to reply