reactjs 是否在Next JS中从节点模块导入css文件?

ijxebb2r  于 2023-01-12  发布在  React
关注(0)|答案(6)|浏览(159)

我对next.js非常陌生。使用它来渲染我的应用程序的服务器端。
根据文档,您可以从静态文件夹导入css文件,该文件夹应该在根目录中,但我想从node_modules导入css,因为我已经扩展了bootstrap并创建了自己的包。

wb1gzix0

wb1gzix01#

**更新:**如果您在将普通css导入到组件中时遇到任何问题,请遵循this示例。

除此之外没有什么区别.如果你是从静态文件夹导入地址是这样的:
import stylesheet from '../static/css/index.css'
现在如果你想从一个节点模块导入css(例如rc-slider包),它将是:
import rcstyle from 'rc-slider/assets/index.css';

w46czmvw

w46czmvw2#

添加node_modules/前缀的帮助:

// Old
import "@splidejs/react-splide/dist/css/themes/splide-default.min.css";

// New
import "node_modules/@splidejs/react-splide/dist/css/themes/splide-default.min.css";
xam8gpfp

xam8gpfp3#

这可能是您正在寻找的解决方案:

3个简单步骤:

1.安装next-css插件:

npm install --save @zeit/next-css

1.在根目录中创建包含以下内容的next.config.js:

// next.config.js 
const withCSS = require('@zeit/next-css')

module.exports = withCSS({
  cssLoaderOptions: {
    url: false
  }
})

1.现在你应该可以像这样从node_modules导入样式表了:

import 'bootstrap-css-only/css/bootstrap.min.css';
  • 注意:使用Next v 8+*

其他的解决方案都是在next-css出现之前的解决方案,但是如上所述,现在有一个简单的、受支持的解决方案,它是由一个核心团队成员提供的:https://spectrum.chat/next-js/general/ignoring-folders-files-specifically-fonts~4f68cfd5-d576-46b8-adc8-86e9d7ea0b1f

nwlqm0z1

nwlqm0z14#

使用@webdeb/next-styles代替@zeit/next-css,这样就可以正常导入任何节点模块样式。

const withStyles = require('@webdeb/next-styles')

    module.exports = withStyles({
      sass: true, // use .scss files
      modules: true, 
    })
unguejic

unguejic5#

自Next.js 9.2起,不再需要使用next-csswithCSSwithStyle。Next.js本机处理CSS导入。由于这些导入可能会带来Webpack问题(请参阅本期:在NextJs中导入CSS时遇到问题),以下是使用webpack配置加载器的方法。

npm install file-loader --save-dev
npm install url-loader --save-dev

然后将next.config.js文件替换(或完成)为以下内容:

module.exports = {
    cssModules: true,
    webpack: (config, options) => {
        config.node = {
            fs: "empty",
        };
        config.module.rules.push({
            use: [
                options.defaultLoaders.babel,
                {
                    loader: "url-loader?limit=100000",
                },
                {
                    loader: "file-loader",
                },
            ],
        });
        return config;
    },
};

不要忘记删除任何提及withCSSwithStylenext-css的内容,因为它们可能会导致一些错误发生。

y1aodyip

y1aodyip6#

从Nextjs 9.5.4开始,您现在可以直接将css文件从node_modules导入到您需要它的组件中(不需要在_app. js中)。

import DatePicker from 'react-datepicker'
import 'react-datepicker/dist/react-datepicker.css'

更多信息请参见这里的文档-https://nextjs.org/docs/basic-features/built-in-css-support。一切顺利。

相关问题