Tổng hợp css không hoạt động

Gói npm rollup-plugin-import-css nhận được tổng cộng 9.067 lượt tải xuống mỗi tuần. Do đó, chúng tôi đã cho điểm mức độ phổ biến của rollup-plugin-import-css là Nhỏ

Dựa trên số liệu thống kê dự án từ kho lưu trữ GitHub cho gói npm rollup-plugin-import-css, chúng tôi nhận thấy rằng nó đã được gắn dấu sao 23 lần và không có dự án nào khác trong hệ sinh thái phụ thuộc vào nó

Số lượt tải xuống được tính là trung bình động trong khoảng thời gian 12 tháng qua, không bao gồm các ngày cuối tuần và các điểm dữ liệu bị thiếu đã xác định

Tôi là tác giả của một plugin CSS khác dành cho tổng số,

import { css } from 'lit-element';

var style = css`var css = "main {\n  background: red\n}\nmain.nested { background: blue; }\n";
export default css;`;

console.log(style);

1, đây là một plugin đơn giản để nhập tệp css vào javascript dưới dạng văn bản mẫu được gắn thẻ css

import { css } from 'lit-element';

var style = css`var css = "main {\n  background: red\n}\nmain.nested { background: blue; }\n";
export default css;`;

console.log(style);

2

Tôi muốn người dùng của mình có tùy chọn chuyển CSS của họ qua postcss trước khi tải vào JS và để plugin tổng hợp postcss xuất ra một chuỗi CSS mà không cần thêm cú pháp js

Đầu vào

ứng dụng. js

import style from './styles.css'
console.log(style)

phong cách. css

main {
  background: red;
  &.nested { background: blue; }
}

cuộn lên. cấu hình. js

import postcss from 'rollup-plugin-postcss'
import litcss from 'rollup-plugin-lit-css'

export default {
  input: 'app.js',
  output: {
    format: 'es',
    file: 'bundle.js',
  },
  plugins: [
    postcss({
      output: 'css',
      inject: false,
      plugins: [
        require('postcss-preset-env')({stage: 0})
      ]
    }),
    litcss(),
  ],
}

Gói dự kiến. js

import { css } from 'lit-element';

var style = css`main {
  background: red
}
main.nested { background: blue; }
`;

console.log(style);

Gói thực tế. js

import { css } from 'lit-element';

var style = css`var css = "main {\n  background: red\n}\nmain.nested { background: blue; }\n";
export default css;`;

console.log(style);

Nếu tùy chọn này đã có sẵn, tôi không thể tìm thấy tùy chọn này trong tài liệu hoặc nguồn. Từ một chuyến tham quan ngắn về nguồn, có vẻ như plugin luôn xuất JS

Chế độ mặc định là

// rollup.config.js
import styles from "rollup-plugin-styles";
export default {
  output: {
    // Governs names of CSS files (for assets from CSS use `hash` option for url handler).
    // Note: using value below will put `.css` files near js,
    // but make sure to adjust `hash`, `assetDir` and `publicPath`
    // options for url handler accordingly.
    assetFileNames: "[name]-[hash][extname]",
  },
  plugins: [styles()],
};

5, có nghĩa là CSS được nhúng bên trong JS và được đưa vào trong thời gian chạy, với khả năng chuyển các tùy chọn cho bộ tiêm CSS hoặc thậm chí chuyển bộ tiêm của riêng bạn

CSS có sẵn dưới dạng xuất mặc định ở chế độ

// rollup.config.js
import styles from "rollup-plugin-styles";
export default {
  output: {
    // Governs names of CSS files (for assets from CSS use `hash` option for url handler).
    // Note: using value below will put `.css` files near js,
    // but make sure to adjust `hash`, `assetDir` and `publicPath`
    // options for url handler accordingly.
    assetFileNames: "[name]-[hash][extname]",
  },
  plugins: [styles()],
};

5 và

// rollup.config.js
import styles from "rollup-plugin-styles";
export default {
  output: {
    // Governs names of CSS files (for assets from CSS use `hash` option for url handler).
    // Note: using value below will put `.css` files near js,
    // but make sure to adjust `hash`, `assetDir` and `publicPath`
    // options for url handler accordingly.
    assetFileNames: "[name]-[hash][extname]",
  },
  plugins: [styles()],
};

7, nhưng nếu Mô-đun CSS được bật, bạn cần sử dụng xuất

// rollup.config.js
import styles from "rollup-plugin-styles";
export default {
  output: {
    // Governs names of CSS files (for assets from CSS use `hash` option for url handler).
    // Note: using value below will put `.css` files near js,
    // but make sure to adjust `hash`, `assetDir` and `publicPath`
    // options for url handler accordingly.
    assetFileNames: "[name]-[hash][extname]",
  },
  plugins: [styles()],
};

8 có tên

// Injects CSS, also available as `style` in this example
import style from "./style.css";
// Using named export of CSS string
import { css } from "./style.css";

Ở chế độ

// rollup.config.js
import styles from "rollup-plugin-styles";
export default {
  output: {
    // Governs names of CSS files (for assets from CSS use `hash` option for url handler).
    // Note: using value below will put `.css` files near js,
    // but make sure to adjust `hash`, `assetDir` and `publicPath`
    // options for url handler accordingly.
    assetFileNames: "[name]-[hash][extname]",
  },
  plugins: [styles()],
};

9, không có bản xuất nào khả dụng vì CSS hoàn toàn được xử lý và chuyển qua quy trình xây dựng, điều này hữu ích nếu bạn muốn xử lý trước CSS trước khi sử dụng nó với các plugin tiêu thụ CSS, v.v. g. rollup-plugin-lit-css

Các tệp cấu hình PostCSS sẽ được tìm thấy và tải tự động, nhưng hành vi này có thể định cấu hình bằng tùy chọn

main {
  background: red;
  &.nested { background: blue; }
}

10

Nhập tệp

CSS/Bút cảm ứng

main {
  background: red;
  &.nested { background: blue; }
}

2

Sass / Ít hơn

Bạn có thể thêm đường dẫn với

main {
  background: red;
  &.nested { background: blue; }
}

11 để giải quyết trong

main {
  background: red;
  &.nested { background: blue; }
}

12

main {
  background: red;
  &.nested { background: blue; }
}

5

Cũng lưu ý rằng partials được xem xét đầu tiên, e. g

main {
  background: red;
  &.nested { background: blue; }
}

6

Sẽ tìm kiếm

main {
  background: red;
  &.nested { background: blue; }
}

13 trước (với (các) tiện ích mở rộng phù hợp), sau đó tìm

main {
  background: red;
  &.nested { background: blue; }
}

14 nếu

main {
  background: red;
  &.nested { background: blue; }
}

13 không tồn tại

Tiêm CSS

import postcss from 'rollup-plugin-postcss'
import litcss from 'rollup-plugin-lit-css'

export default {
  input: 'app.js',
  output: {
    format: 'es',
    file: 'bundle.js',
  },
  plugins: [
    postcss({
      output: 'css',
      inject: false,
      plugins: [
        require('postcss-preset-env')({stage: 0})
      ]
    }),
    litcss(),
  ],
}

0

import postcss from 'rollup-plugin-postcss'
import litcss from 'rollup-plugin-lit-css'

export default {
  input: 'app.js',
  output: {
    format: 'es',
    file: 'bundle.js',
  },
  plugins: [
    postcss({
      output: 'css',
      inject: false,
      plugins: [
        require('postcss-preset-env')({stage: 0})
      ]
    }),
    litcss(),
  ],
}

1

Phát CSS đã xử lý

import postcss from 'rollup-plugin-postcss'
import litcss from 'rollup-plugin-lit-css'

export default {
  input: 'app.js',
  output: {
    format: 'es',
    file: 'bundle.js',
  },
  plugins: [
    postcss({
      output: 'css',
      inject: false,
      plugins: [
        require('postcss-preset-env')({stage: 0})
      ]
    }),
    litcss(),
  ],
}

2

// rollup.config.js
import styles from "rollup-plugin-styles";
export default {
  output: {
    // Governs names of CSS files (for assets from CSS use `hash` option for url handler).
    // Note: using value below will put `.css` files near js,
    // but make sure to adjust `hash`, `assetDir` and `publicPath`
    // options for url handler accordingly.
    assetFileNames: "[name]-[hash][extname]",
  },
  plugins: [styles()],
};

0

Với Sass/Less/Stylus

Cài đặt phụ thuộc tương ứng

• Để hỗ trợ

  main {
    background: red;
    &.nested { background: blue; }
  }
  

  16, hãy cài đặt

  main {
    background: red;
    &.nested { background: blue; }
  }
  

  17 hoặc

  main {
    background: red;
    &.nested { background: blue; }
  }
  

  18

  // rollup.config.js
  import styles from "rollup-plugin-styles";
  export default {
    output: {
      // Governs names of CSS files (for assets from CSS use `hash` option for url handler).
      // Note: using value below will put `.css` files near js,
      // but make sure to adjust `hash`, `assetDir` and `publicPath`
      // options for url handler accordingly.
      assetFileNames: "[name]-[hash][extname]",
    },
    plugins: [styles()],
  };
  

  1

  // rollup.config.js
  import styles from "rollup-plugin-styles";
  export default {
    output: {
      // Governs names of CSS files (for assets from CSS use `hash` option for url handler).
      // Note: using value below will put `.css` files near js,
      // but make sure to adjust `hash`, `assetDir` and `publicPath`
      // options for url handler accordingly.
      assetFileNames: "[name]-[hash][extname]",
    },
    plugins: [styles()],
  };
  

  2

• Để hỗ trợ

  main {
    background: red;
    &.nested { background: blue; }
  }
  

  19, hãy cài đặt

  // Injects CSS, also available as `style` in this example
  import style from "./style.css";
  // Using named export of CSS string
  import { css } from "./style.css";
  

  0

  // rollup.config.js
  import styles from "rollup-plugin-styles";
  export default {
    output: {
      // Governs names of CSS files (for assets from CSS use `hash` option for url handler).
      // Note: using value below will put `.css` files near js,
      // but make sure to adjust `hash`, `assetDir` and `publicPath`
      // options for url handler accordingly.
      assetFileNames: "[name]-[hash][extname]",
    },
    plugins: [styles()],
  };
  

  3

• Để hỗ trợ

  // Injects CSS, also available as `style` in this example
  import style from "./style.css";
  // Using named export of CSS string
  import { css } from "./style.css";
  

  1, hãy cài đặt

  // Injects CSS, also available as `style` in this example
  import style from "./style.css";
  // Using named export of CSS string
  import { css } from "./style.css";
  

  2

  // rollup.config.js
  import styles from "rollup-plugin-styles";
  export default {
    output: {
      // Governs names of CSS files (for assets from CSS use `hash` option for url handler).
      // Note: using value below will put `.css` files near js,
      // but make sure to adjust `hash`, `assetDir` and `publicPath`
      // options for url handler accordingly.
      assetFileNames: "[name]-[hash][extname]",
    },
    plugins: [styles()],
  };
  

  4

Vậy là xong, bây giờ bạn có thể nhập các tệp

// Injects CSS, also available as `style` in this example
import style from "./style.css";
// Using named export of CSS string
import { css } from "./style.css";

3

// Injects CSS, also available as `style` in this example
import style from "./style.css";
// Using named export of CSS string
import { css } from "./style.css";

4

// Injects CSS, also available as `style` in this example
import style from "./style.css";
// Using named export of CSS string
import { css } from "./style.css";

5

// Injects CSS, also available as `style` in this example
import style from "./style.css";
// Using named export of CSS string
import { css } from "./style.css";

6

// Injects CSS, also available as `style` in this example
import style from "./style.css";
// Using named export of CSS string
import { css } from "./style.css";

7 trong mã của mình

Cấu hình

Xem Tham chiếu API cho

// Injects CSS, also available as `style` in this example
import style from "./style.css";
// Using named export of CSS string
import { css } from "./style.css";

8 để biết danh sách đầy đủ các tùy chọn khả dụng

Tại sao

Bởi vì các lựa chọn thay thế trông không đủ tốt - chúng quá cơ bản, quá lỗi hoặc được bảo trì kém

Ví dụ: giải pháp thay thế chính (và nguồn cảm hứng) là rollup-plugin-postcss, nhưng tại thời điểm đó, nó không được duy trì tích cực, có một loạt lỗi nghiêm trọng và chủ quan thiếu một số tính năng hữu ích và cải thiện chất lượng cuộc sống nên là một phần của

Như đã nói, đây là danh sách cơ bản về những thứ phân biệt plugin này với plugin đã nói ở trên

Làm cách nào để gộp CSS với rollup?

Làm cách nào để nhập CSS trong cuộn lên?

Rollup không được dùng nữa?

Lệnh rollup là gì?