作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
这是我的 Webpack
scss/css
的配置文件。
...
{
test: /\.s?css$/,
use: [
'style-loader',
{ loader: 'css-loader', options: { importLoaders: 2 } },
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: loader => [
require('postcss-import')({ root: loader.resourcePath }),
require('cssnano')(),
require('postcss-cssnext')(),
]
}
},
'sass-loader',
]
}
...
cssnext
时函数如
gray(100)
,输出
CSS
file 在放置函数的地方有一个空值。我想知道我在这里做错了什么。
background-color: gray(100);
输出到
background-color: ;
最佳答案
对于您的确切问题,cssnext
函数,你必须放 cssnano
之后 postcss-cssnext
,如下图:
...
{
test: /\.s?css$/,
use: [
'style-loader',
{ loader: 'css-loader', options: { importLoaders: 2 } },
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: loader => [
require('postcss-import')({ root: loader.resourcePath }),
require('postcss-cssnext')(),
require('cssnano')(),
]
}
},
'sass-loader',
]
}
...
sass-loader
?当您有
postcss
在你的项目中。
PostCSS
可以做所有的工作,比如
sass
更好的是,语法风格取决于你,我建议看
THIS REPO
,
PostCSS
配置齐全在
Webpack
,也在这个 repo 中,
SCSS
使用语法。
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules\/)/,
use: [
{
loader: 'babel-loader',
}
]
},
{
test: /\.pcss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
modules: true,
importLoaders: 1,
localIdentName: '[hash:base64:10]',
sourceMap: false,
}
},
{
loader: 'postcss-loader',
options: {
config: {
path: `${__dirname}/../postcss/postcss.config.js`,
}
}
}
]
})
}
]
*.pcss
而不是
*.scss
,
*.sass
或
*.css
,这只是为了一致性,没有什么不同。
PostCSS
配置在单独的文件中,它是:
module.exports = {
ident: 'postcss',
syntax: 'postcss-scss',
map: {
'inline': true,
},
plugins: {
'postcss-partial-import': {
'prefix': '_',
'extension': '.pcss',
'glob': false,
'path': ['./../src/styles']
},
'postcss-nested-ancestors': {},
'postcss-apply': {},
'postcss-custom-properties': {},
'postcss-nested': {},
'postcss-cssnext': {
'features': {
'nesting': false
},
'warnForDuplicates': false
},
'postcss-extend': {},
'css-mqpacker': {
'sort': true
},
'autoprefixer': {
'browsers': ['last 15 versions']
},
}
};
cssnext
效果很好,我用过
color()
功能,它运作良好。
关于webpack - 如何让 postcss-loader、postcss-cssnext 和 sass-loader 在 webpack 中协同工作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50409261/
我有以下配置,其中有一个 EventInfoCard。当它处于预加载状态时,它会呈现一个不同的组件,该组件从父级继承了很多 CSS。我正在使用 postcss-cssnext 变量,这个组合函数似乎不
我需要使用 font-awesome。 PostCSS 尝试在源目录中查找字体,但在 node_modules/font-awesome/fonts 中找不到 错误文本: Error: Can't r
很抱歉,如果这个问题已经问了又问。但是每次我想在我的 Typescript 项目中使用外部节点包时,我总是遇到这个讨厌的“错误 TS2349”,什么不但是有一个 TypeScript 定义 :( 这是
我用cssnext写我的css :root{ --ellipsis: { overflow: hidden; text-overflow: ellipsis;
这是我的 Webpack scss/css 的配置文件。 ... { test: /\.s?css$/, use: [ 'style-loader', { lo
我是一名优秀的程序员,十分优秀!