标签: css-import

如何在nextjs应用程序中导入外部css文件

我正在研究基于反应的 nextjs 应用程序。一些 npm 包使用外部 css 导入。我收到类似的错误

Module parse failed, you may need an appropriate loader to handle this file type.

Run Code Online (Sandbox Code Playgroud)

如何在我的 nextjs 应用程序中支持从外部包导入 css。我通过在 next.config.js 中进行更改来检查某个地方，它有效。但我找不到合适的。如果有人能帮助我解决这个问题，那就太好了。

reactjs css-import nextjs webpack-loader

Mir*_*kar

2017 11-24

6
推荐指数

2
解决办法

1万
查看次数

react-slick：从slick-carousel导入CSS失败

在这里反应新手。我的应用程序使用create-react-app，而我正在使用react-slick作为轮播。我正在尝试按照安装程序中提供的指示进行操作，但是以下操作对我不起作用：

@import "~slick-carousel/slick/slick.css"; @import "~slick-carousel/slick/slick-theme.css";

我收到以下错误：

./src/components/Homepage.scss Module not found: Can't resolve '~slick-carousel/slick/slick.css' in '/Users/simon/Dev/frischideas/site-new/src/components'

如果我将CDS从CDN添加到index.html，它会起作用，但是我宁愿避免该网络调用，因为我认为它会影响初始加载时页面的呈现。

我试着按照说明配置创建反应的应用程序内使用相对路径，但是，这不是为我工作无论是。也许我完全误会了，但是我认为〜表示法允许我从/ node_modules中的包中导入scss。

任何建议/澄清将不胜感激。

更新：从我的webpack.config文件中添加设置（大多数是create-react-app中的默认设置）。

{
            test: /\.scss$/,
            use: [
              require.resolve('classnames-loader'),
              require.resolve('style-loader'), {
                loader: require.resolve('css-loader'),
                options: {
                  importLoaders: 1,
                  modules: 1,
                  localIdentName: "[name]__[local]___[hash:base64:5]"  
                },
              },{
                loader: require.resolve('postcss-loader'),
                options: {
                  // Necessary for external CSS imports to work
                  // https://github.com/facebookincubator/create-react-app/issues/2677
                  ident: 'postcss',
                  plugins: () => [
                    require('postcss-flexbugs-fixes'),
                    autoprefixer({
                      browsers: [
                        '>1%',
                        'last 6 versions',
                        'Firefox ESR',
                        'not ie < 9', // React …

Run Code Online (Sandbox Code Playgroud)

reactjs css-import react-slick

fly*_*000

2019 08-24

5
推荐指数

4
解决办法

8752
查看次数

如何在 Web 组件中使用 Material Design 图标？

看起来 mdi 无法在 Web 组件内工作，或者我错过了什么？

我想开发一个封装其依赖项的 Web 组件，将链接添加到父文档是可行的，但它违反了初衷。

<html>
<body>
<x-webcomponent></x-webcomponent>
<script>
customElements.define(
  "x-webcomponent",
  class extends HTMLElement {
    constructor() {
      super();
      this.attachShadow({ mode: "open" });
      this.shadowRoot.innerHTML = `
        <style>@import url('https://cdn.materialdesignicons.com/4.9.95/css/materialdesignicons.min.css');</style>
        <span class="mdi mdi-home"></span>
      `;
    }
  }
);
</script>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

https://codepen.io/Jamesgt/pen/MWwvJaw

web-component css-import native-web-component material-design-icons

Jam*_*sgt

2020 03-03

5
推荐指数

1
解决办法

5655
查看次数

带图层和链接的 CSS @import 的性能对比

假设 CSS 文件中没有内部嵌入，那么在以下服务器端渲染场景中使用 CSS 层和@import对比是否存在任何性能缺陷：<link>

使用<link>：

<html>\n<head>\n  <link rel="stylesheet" href="reset.css">\n  <link rel="stylesheet" href="helpers.css">\n  <link rel="stylesheet" href="grid.css">\n  <link rel="stylesheet" href="theme.css">\n</head>\n<body>\n  <link rel="stylesheet" href="header.css">\n  <header><!-- Site header, logo, nav etc --></header>\n\n  <main>\n    <link rel="stylesheet" href="carousel.css">\n    <div class="carousel-module"><!-- Carousel module --></div>\n\n    <link rel="stylesheet" href="cards.css">\n    <div class="cards-module"><!-- Cards module --></div>\n  </main>\n\n  <link rel="stylesheet" href="footer.css">\n  <footer><!-- Site footer --></footer>\n</body>\n</html>\n

Run Code Online (Sandbox Code Playgroud)\n

@import与图层一起使用：

<html>\n<head>\n  <style>\n    @layer default, theme;\n    @import url("reset.css") layer(default);\n    @import url("helpers.css") layer(default);\n    @import url("grid.css") layer(default);\n    @import …

Run Code Online (Sandbox Code Playgroud)

css performance css-import css-layer

Dan*_*Dan

2023 01-24

5
推荐指数

0
解决办法

377
查看次数