0
當前項目有反應,webpack和postcss。這裏的意圖是創建全球混搭。我確實嘗試了幾種方法並得出以下結果。Webpack&PostCSS功能混合不可見
首先意向
var postCSSConfig = [
require('postcss-import'),
// require('precss'),
require('postcss-mixins')({
aloha: {
color: 'red'
}
}),
require('postcss-cssnext')({
browsers: ['last 2 versions', '> 5%'],
}),
]
module.exports = postCSSConfig;
由於使用@mixin aloha
整個項目甚至還沒有定義混入不影響樣式表的結果,既不給出了一個錯誤。
第二意向。
module.exports = {
plugins: {
'postcss-import': {},
'postcss-mixins': {
aloha: {
color: 'red'
}
},
'precss': {},
'postcss-cssnext': {
},
},
};
在這一點上拋出@mixin aloha
沒有定義一個錯誤。
的WebPack配置
const path = require('path'),
webpack = require('webpack'),
HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: [
'react-hot-loader/patch'
'webpack-dev-server/client?http://localhost:8090',
'webpack/hot/only-dev-server',
'./index.js'
],
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'build'),
publicPath: '/'
},
context: path.resolve(__dirname, 'logic'),
devtool: 'inline-source-map',
devServer: {
hot: true,
contentBase: path.resolve(__dirname, 'build'),
publicPath: '/',
port: 8090
},
module: {
rules: [
{
test: /\.js$/,
use: [
'babel-loader',
],
exclude: /node_modules/
},
{
test: /\.css$/,
use: [
'style-loader',
'css-loader?modules',
'postcss-loader',
],
},
{
test: /\.(jpg|png|svg)$/,
loader: 'url-loader',
options: {
limit: 25000,
},
},
{
test: /\.(ttf|eot|woff|woff2)$/,
loader: 'file-loader',
options: {
name: 'fonts/[name].[ext]',
},
}
],
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(),
new HtmlWebpackPlugin({
template: './index.template.html'
})
],
}
能否請您提出什麼可能我錯了嗎?
@Thank你,好先生。我正在按照這些演練https://github.com/DavidWells/PostCSS-tutorial中描述的方法。它確實有效,但我只是意識到當前的項目是建立在webpack 2之上的。不幸的是,即使經過編輯後,問題仍然存在:( – volna
它從我測試過的很好。你使用mixin在選擇器中,例如'body {@mixin aloha}'?因爲在外面它沒有效果 –
我在標籤和類上試過了,當我在樣式表中定義它並在它的工程中明確地導入它們時,看到他們我們這裏討論的方式 – volna