Rollup mô-đun css bản thảo

rollup-plugin-postcss-mô-đun

Sử dụng tùy chọn

import postcss from 'rollup-plugin-postcss-modules'
import typescript from 'rollup-plugin-typescript2'

import autoprefixer from 'autoprefixer'

export default {
	entry: 'src/index.tsx',
	dest: 'dist/bundle.js',
	format: 'iife',
	plugins: [
		postcss({
			extract: true,  // extracts to `${basename(dest)}.css`
			plugins: [autoprefixer()],
			writeDefinitions: true,
			// modules: { .. }
		}),
		typescript(),
	],
}

5 để chuyển tùy chọn cho plugin

import postcss from 'rollup-plugin-postcss-modules'
import typescript from 'rollup-plugin-typescript2'

import autoprefixer from 'autoprefixer'

export default {
	entry: 'src/index.tsx',
	dest: 'dist/bundle.js',
	format: 'iife',
	plugins: [
		postcss({
			extract: true,  // extracts to `${basename(dest)}.css`
			plugins: [autoprefixer()],
			writeDefinitions: true,
			// modules: { .. }
		}),
		typescript(),
	],
}

6

Với

import postcss from 'rollup-plugin-postcss-modules'
import typescript from 'rollup-plugin-typescript2'

import autoprefixer from 'autoprefixer'

export default {
	entry: 'src/index.tsx',
	dest: 'dist/bundle.js',
	format: 'iife',
	plugins: [
		postcss({
			extract: true,  // extracts to `${basename(dest)}.css`
			plugins: [autoprefixer()],
			writeDefinitions: true,
			// modules: { .. }
		}),
		typescript(),
	],
}

7 2. 0, lợi thế tiếp tục duy nhất mà cái này có là hỗ trợ TypeScript

Một tùy chọn mới tồn tại

• import postcss from 'rollup-plugin-postcss-modules'
  import typescript from 'rollup-plugin-typescript2'
  
  import autoprefixer from 'autoprefixer'
  
  export default {
  	entry: 'src/index.tsx',
  	dest: 'dist/bundle.js',
  	format: 'iife',
  	plugins: [
  		postcss({
  			extract: true,  // extracts to `${basename(dest)}.css`
  			plugins: [autoprefixer()],
  			writeDefinitions: true,
  			// modules: { .. }
  		}),
  		typescript(),
  	],
  }

  8 tạo tệp

  import postcss from 'rollup-plugin-postcss-modules'
  import typescript from 'rollup-plugin-typescript2'
  
  import autoprefixer from 'autoprefixer'
  
  export default {
  	entry: 'src/index.tsx',
  	dest: 'dist/bundle.js',
  	format: 'iife',
  	plugins: [
  		postcss({
  			extract: true,  // extracts to `${basename(dest)}.css`
  			plugins: [autoprefixer()],
  			writeDefinitions: true,
  			// modules: { .. }
  		}),
  		typescript(),
  	],
  }

  0 bên cạnh mỗi tệp

  import postcss from 'rollup-plugin-postcss-modules'
  import typescript from 'rollup-plugin-typescript2'
  
  import autoprefixer from 'autoprefixer'
  
  export default {
  	entry: 'src/index.tsx',
  	dest: 'dist/bundle.js',
  	format: 'iife',
  	plugins: [
  		postcss({
  			extract: true,  // extracts to `${basename(dest)}.css`
  			plugins: [autoprefixer()],
  			writeDefinitions: true,
  			// modules: { .. }
  		}),
  		typescript(),
  	],
  }

  1 đã xử lý

Ngoài ra, tùy chọn

import postcss from 'rollup-plugin-postcss-modules'
import typescript from 'rollup-plugin-typescript2'

import autoprefixer from 'autoprefixer'

export default {
	entry: 'src/index.tsx',
	dest: 'dist/bundle.js',
	format: 'iife',
	plugins: [
		postcss({
			extract: true,  // extracts to `${basename(dest)}.css`
			plugins: [autoprefixer()],
			writeDefinitions: true,
			// modules: { .. }
		}),
		typescript(),
	],
}

2 mặc định hơi khác một chút

• import postcss from 'rollup-plugin-postcss-modules'
  import typescript from 'rollup-plugin-typescript2'
  
  import autoprefixer from 'autoprefixer'
  
  export default {
  	entry: 'src/index.tsx',
  	dest: 'dist/bundle.js',
  	format: 'iife',
  	plugins: [
  		postcss({
  			extract: true,  // extracts to `${basename(dest)}.css`
  			plugins: [autoprefixer()],
  			writeDefinitions: true,
  			// modules: { .. }
  		}),
  		typescript(),
  	],
  }

  3 được chuyển đổi thành một cái gì đó như

  export const className = 'class-name'
  export const $switch$ = 'switch'
  export default {
  	'class-name': 'class-name',
  	className: 'class-name',
  	'switch': 'switch',
  	$switch$: 'switch',
  }

Thí dụ

xem ở đây để biết một repo có thể sao chép

import postcss from 'rollup-plugin-postcss-modules'
import typescript from 'rollup-plugin-typescript2'

import autoprefixer from 'autoprefixer'

export default {
	entry: 'src/index.tsx',
	dest: 'dist/bundle.js',
	format: 'iife',
	plugins: [
		postcss({
			extract: true,  // extracts to `${basename(dest)}.css`
			plugins: [autoprefixer()],
			writeDefinitions: true,
			// modules: { .. }
		}),
		typescript(),
	],
}

4

import postcss from 'rollup-plugin-postcss-modules'
import typescript from 'rollup-plugin-typescript2'

import autoprefixer from 'autoprefixer'

export default {
	entry: 'src/index.tsx',
	dest: 'dist/bundle.js',
	format: 'iife',
	plugins: [
		postcss({
			extract: true,  // extracts to `${basename(dest)}.css`
			plugins: [autoprefixer()],
			writeDefinitions: true,
			// modules: { .. }
		}),
		typescript(),
	],
}

import postcss from 'rollup-plugin-postcss-modules'
import typescript from 'rollup-plugin-typescript2'

import autoprefixer from 'autoprefixer'

export default {
	entry: 'src/index.tsx',
	dest: 'dist/bundle.js',
	format: 'iife',
	plugins: [
		postcss({
			extract: true,  // extracts to `${basename(dest)}.css`
			plugins: [autoprefixer()],
			writeDefinitions: true,
			// modules: { .. }
		}),
		typescript(),
	],
}

5

________số 8

import postcss from 'rollup-plugin-postcss-modules'
import typescript from 'rollup-plugin-typescript2'

import autoprefixer from 'autoprefixer'

export default {
	entry: 'src/index.tsx',
	dest: 'dist/bundle.js',
	format: 'iife',
	plugins: [
		postcss({
			extract: true,  // extracts to `${basename(dest)}.css`
			plugins: [autoprefixer()],
			writeDefinitions: true,
			// modules: { .. }
		}),
		typescript(),
	],
}

6

import postcss from 'rollup-plugin-postcss-modules'
import typescript from 'rollup-plugin-typescript2'

import autoprefixer from 'autoprefixer'

export default {
	entry: 'src/index.tsx',
	dest: 'dist/bundle.js',
	format: 'iife',
	plugins: [
		postcss({
			extract: true,  // extracts to `${basename(dest)}.css`
			plugins: [autoprefixer()],
			writeDefinitions: true,
			// modules: { .. }
		}),
		typescript(),
	],
}

0

import postcss from 'rollup-plugin-postcss-modules'
import typescript from 'rollup-plugin-typescript2'

import autoprefixer from 'autoprefixer'

export default {
	entry: 'src/index.tsx',
	dest: 'dist/bundle.js',
	format: 'iife',
	plugins: [
		postcss({
			extract: true,  // extracts to `${basename(dest)}.css`
			plugins: [autoprefixer()],
			writeDefinitions: true,
			// modules: { .. }
		}),
		typescript(),
	],
}

7

import postcss from 'rollup-plugin-postcss-modules'
import typescript from 'rollup-plugin-typescript2'

import autoprefixer from 'autoprefixer'

export default {
	entry: 'src/index.tsx',
	dest: 'dist/bundle.js',
	format: 'iife',
	plugins: [
		postcss({
			extract: true,  // extracts to `${basename(dest)}.css`
			plugins: [autoprefixer()],
			writeDefinitions: true,
			// modules: { .. }
		}),
		typescript(),
	],
}

2

import postcss from 'rollup-plugin-postcss-modules'
import typescript from 'rollup-plugin-typescript2'

import autoprefixer from 'autoprefixer'

export default {
	entry: 'src/index.tsx',
	dest: 'dist/bundle.js',
	format: 'iife',
	plugins: [
		postcss({
			extract: true,  // extracts to `${basename(dest)}.css`
			plugins: [autoprefixer()],
			writeDefinitions: true,
			// modules: { .. }
		}),
		typescript(),
	],
}

8

import postcss from 'rollup-plugin-postcss-modules'
import typescript from 'rollup-plugin-typescript2'

import autoprefixer from 'autoprefixer'

export default {
	entry: 'src/index.tsx',
	dest: 'dist/bundle.js',
	format: 'iife',
	plugins: [
		postcss({
			extract: true,  // extracts to `${basename(dest)}.css`
			plugins: [autoprefixer()],
			writeDefinitions: true,
			// modules: { .. }
		}),
		typescript(),
	],
}

4