- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试迁移到 webpack 2,但我似乎无法将 postcss-loader 转换为 autoprefix。我阅读了文档,但似乎找不到问题所在。有人遇到过这个问题吗?如果是这样,您能帮我解决我的问题吗?
webpack.config.js
var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var HTMLWebpackPlugin = require('html-webpack-plugin');
var autoprefixer = require('autoprefixer');
// development variables
const DEVELOPMENT = process.env.NODE_ENV === 'development';
const PRODUCTION = process.env.NODE_ENV === 'production';
// checks if production : development
const entry = PRODUCTION
? [
'./src/index.js'
]
: [
'./src/index.js',
'webpack/hot/dev-server',
'webpack-dev-server/client?http://localhost8080',
];
const plugins = PRODUCTION
? [
new webpack.optimize.UglifyJsPlugin(),
new ExtratTextPlugin('style-[contenthash:10].css'),
new HTMLWebpackPlugin({
template: 'index-template.html'
})
]
: [
new webpack.LoaderOptionsPlugin({ options: { postcss: [ autoprefixer(), ] } }),
new webpack.HotModuleReplacementPlugin(),
];
plugins.push(
new webpack.DefinePlugin({
DEVELOPMENT: JSON.stringify(DEVELOPMENT),
PRODUCTION: JSON.stringify(PRODUCTION),
})
);
// add class name depending on enviroment PROD | DEV
const cssIndentifier = PRODUCTION ? '[hash:base64:10]' : '[path][name]---[local]';
// inject into head in DEV and create CSS file in PROD
const cssLoader = PRODUCTION
? ExtractTextPlugin.extract({
loader: 'css-loader?minimize&localIdentName=' + cssIndentifier
})
: ['style-loader','css-loader?localIdentName=' + cssIndentifier + ',postcss-loader'];
module.exports = {
devtool: 'source-map', //add source mapping to devtools
entry: entry,
plugins: plugins,
externals: {
jquery: 'jQuery' //jquery is external and availabe at the global variable jQuery
},
module: {
rules: [{
test: /\.js$/,
loader:['babel-loader'],
exclude: /node_modules/
}, {
test: /\.(png|jpg|gif)$/,
loader:['url-loader?10000&name=images/[hash.12].[ext]'],//use url loader if image is over 10k : use file loader
exclude: /node_modules/
}, {
test: /\.css$/,
loaders: cssLoader,
exclude: /node_modules/
}]
},
output: {
path: path.join(__dirname, 'dist'),
publicPath: PRODUCTION ? '' : '/dist/',
filename: PRODUCTION ? 'bundle.[hash:12].min.js' : 'bundle.js'
}
};
package.json
{
"name": "starter",
"version": "1.0.0",
"description": "starter project using webpack 2",
"main": "index.js",
"scripts": {
"build": "rimraf dist && NODE_ENV=production webpack",
"dev": "NODE_ENV=development webpack-dev-server"
},
"repository": "https://github.com/rafh/starter-project.git",
"author": "Rafael Heard rafael.heard@gmail.com",
"license": "ISC",
"dependencies": {},
"devDependencies": {
"autoprefixer": "^6.7.6",
"babel": "^6.23.0",
"babel-core": "^6.23.1",
"babel-loader": "^6.3.2",
"babel-preset-es2015": "^6.22.0",
"babel-preset-stage-0": "^6.22.0",
"css-loader": "^0.26.2",
"extract-text-webpack-plugin": "^2.0.0",
"file-loader": "^0.10.1",
"html-webpack-plugin": "^2.28.0",
"loader": "^2.1.1",
"postcss-loader": "^1.3.3",
"rimraf": "^2.6.1",
"style-loader": "^0.13.2",
"url-loader": "^0.5.8",
"webpack": "^2.2.1",
"webpack-dev-server": "^2.4.1"
}
}
最佳答案
您的 webpack 配置存在几个问题,坦率地说,我不知道哪一个会导致问题,因此我将概述所有这些问题,希望其中一个可以解决问题。
cssLoader
不正确地定义了数组,据我所知 - 箭头意外地包含在带有加号的字符串中,而它应该分隔数组:
PRODUCTION
? ExtractTextPlugin.extract({
loader: 'css-loader?importLoaders=1&minimize&localIdentName=' + cssIndentifier
})
: ['style-loader','css-loader?importLoaders=1&localIdentName=' + cssIndentifier, 'postcss-loader'];
对于 webpack 2,使用加载器的正确语法是 use
而不是 loaders
/loader
,如下所示:
{
test: /\.css$/,
use: cssLoader,
exclude: /node_modules/
}
postcss-loader
还建议在之后使用 css-loader
时使用 ?importLoaders=1
,因此您应该将其添加到您的css-loader
的定义:
PRODUCTION
? ExtractTextPlugin.extract({
loader: 'css-loader?minimize&localIdentName=' + cssIndentifier
})
: ['style-loader','css-loader?importLoaders=1&localIdentName=' + cssIndentifier, 'postcss-loader']
最后,选项
应该直接传递给加载器。 LoaderOptionsPlugin.options.postcss 并不理想(我在文档中看不到支持该语法的任何地方),并且在定义加载器时应该传递选项。将 cssLoader
中的字符串 'postcss-loader'
替换为实现此行为的对象。
PRODUCTION
? ExtractTextPlugin.extract({
loader: 'css-loader?minimize&localIdentName=' + cssIndentifier
})
: [
'style-loader',
'css-loader?importLoaders=1&localIdentName=' + cssIndentifier,
{
loader: 'postcss-loader',
options: {
plugins: function () { return [ autoprefixer ] }
}
}
]
The postcss loader readme specifies that
options.plugins
should be a function which returns an array, which is an odd way to work. Ifreturn [ autoprefixer ]
doesn't work, the readme says to usereturn [ require('autoprefixer') ]
, so try that.
我不确定其中哪一个会导致此问题,但希望通过您的 webpack 配置修复这些问题将解决您的加载器问题。
关于javascript - 添加 postcss 和 autoprefixer 到 webpack 2 不加前缀,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42582634/
发布以下查询时,出现错误响应 {"error":{"root_cause":[{"type":"parsing_exception","reason":"[prefix] query does not
我对 Python 和 Django 真的很陌生......我想做的是: 在 Mac OS 10.6.8 上安装 Python 2.7 安装 pip 安装 Django 安装 virtualenvwr
前缀表达式 前缀表达式又称波兰式,前缀表达式的运算符位于操作数之前。 例如: ( 3 + 4 ) × 5 − 6 (3+4)×5-6(3+4)×5−6 对应的前缀表达式就是 - × + 3 4 5 6
如何在Intel C编译器中定义俄语字符串? 在MSVS 2008中,我这样做: _wsetlocale(LC_ALL, L"Russian"); wprintf(L"текст"); 而且有效。 在
这是我到目前为止所得到的: SPECS = $(shell find spec -iname "*_spec.js") spec: @NODE_ENV=test \ @NODE_PAT
我看到了下面的前缀::它代表什么? :abc 是一个关键字,但是 ::abc 是什么? 谢谢,穆尔塔扎 最佳答案 假设当前命名空间是my.app。然后, ::x 是 :my.app/x 的阅读器简写,
我为我的 discord 创建了一个建议功能,用户可以说 +suggest(建议),它会自动发布到另一个 channel 。 有些事情我需要帮助: 将“建议由用户制作”放入标题中,而不是在单独的行中。
#include int main() { int a=1; printf("%d",(++a)++); return 0; } 此代码出现错误 error: invalid lvalue in
我在使用前缀和后缀运算符对数字执行减法时遇到了一个小问题。这是我的程序: public class postfixprefix { public static void main (Strin
当我在 Android native 浏览器中运行 HTML5 兼容性测试时,它会看到 IndexedDB 支持标记为“Prefixed”,而在 Chrome 和其他浏览器中则标记为“Yes”。我知道
我试过重载运算符--前缀,但我有错误,有人帮忙吗? #include #include "Circulo.h" using namespace std; int main() { //par
我正在尝试在我正在制作的这个论坛上创建一个引用功能,当我按下引用时,我只需用 Markdown 填充 textarea ,但唯一的事情是我需要在每行的 markdown 前面加上 > 前缀,这样它就是
friend 之间打赌。sum 变量定义为全局变量。我们有 2 个线程在循环 1..100 上运行并在每个循环中将 sum 递增 1。 打印什么?“和=”? int sum = 0; void fun
这个问题在这里已经有了答案: 关闭 10 年前。 Possible Duplicate: Post Increment and Pre Increment concept? 谁能明确解释前缀增量与后
从模板类继承时,我需要在派生类中访问的所有基类成员前面加上this: template struct X{ int foo; void bar(); }; template struct
据我所知,在 C++ 中,在同一类的函数成员中调用另一个成员函数不需要“this”前缀,因为它是隐式的。但是,在使用函数指针的特定情况下,编译器需要它。仅当我通过 func 指针为调用包含“this”
例如,考虑以下名称冲突的地方 nest1 : template class nest1 {}; class cls { public: template class nest1 {};
我无法理解下面一段特定代码的逻辑。 int i[] = { 21, 4, -17, 45 }; int* i_ptr = i; std::cout << (*i_ptr)++ << std::endl
有人能给我指出正确的方向吗,我目前有一个可搜索的数据库,但遇到了按标题搜索的问题。 如果标题以“The”开头,那么显然标题将位于“T”部分,避免搜索“The”的好方法是什么?我应该连接两个字段来显示标
我在 2 小时前创建了一个新项目。以与我的旧(不同)项目相同的方式配置它,一切正常。 在我的 podfile 中我有: pod 'CocoaLumberjack', '2.0.0-rc2' 如果我在
我是一名优秀的程序员,十分优秀!