如何在汇总中使用CSS @import? [英] How to use css @import in rollup?
问题描述
我尝试创建一个简单的汇总应用程序的配置,并且在使用CSS时遇到了一些麻烦.
I try to create a simple rollup app's config and have some troubles with css.
这是我的css文件:
@import "normalize.css";
@import "typeface-roboto";
html, body, #root {
height: 100%;
font-family: Roboto, serif;
}
body {
background: url('./images/background.jpg');
}
我所拥有的就是关于找不到资源的3个错误.
And all what i have is 3 errors about not found resources.
这是我的配置文件:
import resolve from 'rollup-plugin-node-resolve'
import commonjs from 'rollup-plugin-commonjs'
import babel from 'rollup-plugin-babel'
import replace from 'rollup-plugin-replace'
import postcss from 'rollup-plugin-postcss'
import html from 'rollup-plugin-fill-html'
import url from "rollup-plugin-url"
process.env.NODE_ENV = 'development'
const CWD = process.cwd()
const Paths = {
SRC: `${CWD}/src`,
DIST: `${CWD}/dist-rollup`,
NODE_MODULES: `${CWD}/node_modules`
}
Object.assign(Paths, {
INPUT: Paths.SRC + '/index.js',
OUTPUT: Paths.DIST + '/index.js'
})
export default {
input: Paths.INPUT,
output: {
file: Paths.OUTPUT,
format: 'iife', // immediately-invoked function expression — suitable for <script> tags
// sourcemap: true
},
plugins: [
html({
template: `${Paths.SRC}/template.html`,
filename: 'index.html'
}),
postcss({
modules: true,
plugins: [
]
}),
url({
limit: 10 * 1024, // inline files < 10k, copy files > 10k
}),
resolve(), // tells Rollup how to find date-fns in node_modules
babel({
exclude: 'node_modules/**'
}),
commonjs(), // converts date-fns to ES modules
replace({ 'process.env.NODE_ENV': JSON.stringify('development') })
]
}
我曾尝试使用某些插件,例如 rollup-plugin-rebase
和 postcss-assets
,但不幸的是,它没有帮助我.
I was tried to use some plugins like rollup-plugin-rebase
and postcss-assets
, but unfortunately, it did not help me.
推荐答案
也许我选择了不常见的方式,但是对我来说,唯一可行的解决方案是使用postcss和2个插件:postcss-imports用于@import语法,postcss-url用于url.
Maybe i chose not common way, but single working solution for me is use postcss with 2 plugins: postcss-imports for @import syntax and postcss-url for url.
但是也有困难.Postcss-url不想像我期望的那样工作.我必须使用此插件的3个实例:
But there were difficulties too. Postcss-url don't want just work, like i expect. I had to use 3 instance of this plugin:
[
postcssUrl(), // Find files' real paths.
postcssUrl({
url: 'copy',
basePath: 'src',
useHash: true,
assetsPath: 'dist'
}), // Copy to required destination.
postcssUrl({
url (asset) {
const rebasedUrl = `dist/${path.basename(asset.absolutePath)}`
return `${rebasedUrl}${asset.search}${asset.hash}`
}
}) // Fix final paths.
]
您可能会在https://github.com/pashaigood/bundlers-comparison
当然,如果您知道这一点,请与我分享,我将很高兴看到更简单的解决方案.
And of course, i will be glad to see more simple solution if you know that, please, share with me.
这篇关于如何在汇总中使用CSS @import?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!