更改 rollup-plugin-postcss 仅为某些文件生成 CSS class 名称
Changing rollup-plugin-postcss generated CSS class names for only certain files
我需要将 rollup-plugin-postcss 配置为仅修改某些文件的 CSS class 名称。我知道 WebPack 可以做到这一点,但我不知道如何使用 Rollup 来做到这一点。理想情况下,我想给出一个正则表达式来描述如何处理符合该条件的 CSS 文件。
这是我的 rollup.config.js 的样子:
import commonjs from "@rollup/plugin-commonjs";
import resolve from "@rollup/plugin-node-resolve";
import external from "rollup-plugin-peer-deps-external";
import typescript from "rollup-plugin-typescript2";
import pkg from "./package.json";
import babel from "rollup-plugin-babel";
import sourcemaps from "rollup-plugin-sourcemaps";
import postcss from "rollup-plugin-postcss";
import static_files from "rollup-plugin-static-files";
import image from "@rollup/plugin-image";
export default {
input: "src/index.ts",
output: [
{
file: pkg.main,
format: "cjs",
sourcemap: true,
},
{
file: pkg.module,
format: "es",
sourcemap: true,
},
],
plugins: [
external(),
image(),
babel({
exclude: "node_modules/**",
plugins: ["babel-plugin-styled-components"],
}),
static_files({ include: ["./public"] }),
resolve(),
commonjs(),
typescript({
tsconfig: "tsconfig.json",
}),
sourcemaps(),
postcss({
use: ["sass"],
extract: true,
modules: true,
}),
],
external: ["react", "react-dom"],
};
我有点明白了。我使用 rollup-plugin-postcss-modules 而不是 rollup-plugin-postcss。这就是我的 rollup.config.js 最终的样子:
import commonjs from "@rollup/plugin-commonjs";
import resolve from "@rollup/plugin-node-resolve";
import external from 'rollup-plugin-peer-deps-external';
import typescript from "rollup-plugin-typescript2";
import pkg from './package.json';
import babel from 'rollup-plugin-babel';
import sourcemaps from 'rollup-plugin-sourcemaps';
import postcss from "rollup-plugin-postcss-modules";
import static_files from 'rollup-plugin-static-files';
import image from '@rollup/plugin-image';
import stringHash from "string-hash";
export default {
input: 'src/index.ts',
output: [
{
file: pkg.main,
format: 'cjs',
sourcemap: true
}
, {
file: pkg.module,
format: 'es',
sourcemap: true
}
]
, plugins: [
external()
, image()
, babel({
exclude: 'node_modules/**'
, plugins: ["babel-plugin-styled-components"]
})
, static_files({ include: ['./public'] })
, resolve()
, commonjs()
, typescript({
tsconfig: "tsconfig.json"
})
, sourcemaps()
, postcss({
use: ['sass']
, extract: true
, modules: {
generateScopedName: (name, filename, css) => {
if (filename.includes("react-pdf-highlighter") || filename.includes("pdf-viewer") || filename.includes("pdfjs-dist")) {
return name;
}
/*
* NOTE: The code below is from the default implementation of generateScopedName -- Jonathan Byrne 04/16/2021
*/
const i = css.indexOf(`.${name}`);
const lineNumber = css.substr(0, i).split(/[\r\n]/).length;
const hash = stringHash(css).toString(36).substr(0, 5);
return `_${name}_${hash}_${lineNumber}`;
}
}
})
]
, external: ['react', 'react-dom']
};
我需要将 rollup-plugin-postcss 配置为仅修改某些文件的 CSS class 名称。我知道 WebPack 可以做到这一点,但我不知道如何使用 Rollup 来做到这一点。理想情况下,我想给出一个正则表达式来描述如何处理符合该条件的 CSS 文件。
这是我的 rollup.config.js 的样子:
import commonjs from "@rollup/plugin-commonjs";
import resolve from "@rollup/plugin-node-resolve";
import external from "rollup-plugin-peer-deps-external";
import typescript from "rollup-plugin-typescript2";
import pkg from "./package.json";
import babel from "rollup-plugin-babel";
import sourcemaps from "rollup-plugin-sourcemaps";
import postcss from "rollup-plugin-postcss";
import static_files from "rollup-plugin-static-files";
import image from "@rollup/plugin-image";
export default {
input: "src/index.ts",
output: [
{
file: pkg.main,
format: "cjs",
sourcemap: true,
},
{
file: pkg.module,
format: "es",
sourcemap: true,
},
],
plugins: [
external(),
image(),
babel({
exclude: "node_modules/**",
plugins: ["babel-plugin-styled-components"],
}),
static_files({ include: ["./public"] }),
resolve(),
commonjs(),
typescript({
tsconfig: "tsconfig.json",
}),
sourcemaps(),
postcss({
use: ["sass"],
extract: true,
modules: true,
}),
],
external: ["react", "react-dom"],
};
我有点明白了。我使用 rollup-plugin-postcss-modules 而不是 rollup-plugin-postcss。这就是我的 rollup.config.js 最终的样子:
import commonjs from "@rollup/plugin-commonjs";
import resolve from "@rollup/plugin-node-resolve";
import external from 'rollup-plugin-peer-deps-external';
import typescript from "rollup-plugin-typescript2";
import pkg from './package.json';
import babel from 'rollup-plugin-babel';
import sourcemaps from 'rollup-plugin-sourcemaps';
import postcss from "rollup-plugin-postcss-modules";
import static_files from 'rollup-plugin-static-files';
import image from '@rollup/plugin-image';
import stringHash from "string-hash";
export default {
input: 'src/index.ts',
output: [
{
file: pkg.main,
format: 'cjs',
sourcemap: true
}
, {
file: pkg.module,
format: 'es',
sourcemap: true
}
]
, plugins: [
external()
, image()
, babel({
exclude: 'node_modules/**'
, plugins: ["babel-plugin-styled-components"]
})
, static_files({ include: ['./public'] })
, resolve()
, commonjs()
, typescript({
tsconfig: "tsconfig.json"
})
, sourcemaps()
, postcss({
use: ['sass']
, extract: true
, modules: {
generateScopedName: (name, filename, css) => {
if (filename.includes("react-pdf-highlighter") || filename.includes("pdf-viewer") || filename.includes("pdfjs-dist")) {
return name;
}
/*
* NOTE: The code below is from the default implementation of generateScopedName -- Jonathan Byrne 04/16/2021
*/
const i = css.indexOf(`.${name}`);
const lineNumber = css.substr(0, i).split(/[\r\n]/).length;
const hash = stringHash(css).toString(36).substr(0, 5);
return `_${name}_${hash}_${lineNumber}`;
}
}
})
]
, external: ['react', 'react-dom']
};