我尝试在一个使用. tpl文件的旧项目中使用Tailwind v2。这不是一个问题,因为我们正在迁移到SPA的世界。无论如何,我正在做的应该都能工作。
我使用以下代码(字面上取自我的package.json):
- "自动前缀":"^10.2.5",
- "巴伯尔式装载机":"^8.1.0",
- "css加载程序":"^5.0.0",
- "迷你css提取插件":"^1.5.0",
- "提取文本网络包插件":"^3.0.2",
- "postcss加载程序":"^5.2.0",
- "postcss预设环境":"^6.7.0",
- "网络包合并":"^5.7.3"
- "邮政编码":"^8.2.12",
- "sass":"^1.27.0",
- "sass加载程序":"^10.0.3",
- "样式加载器":"^2.0.0",
- "顺风":"^2.1.1",
- "网络包":"^5.35.0",
- "网络包-客户端":"^4.6.0"
- webpack-merge**仅用于区分生产和开发的文件名。
下面是我的webpack.config.js的精确副本:
const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const { SRC, DIST, ASSETS } = require('./paths')
module.exports = {
plugins: [
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: 'styles.css',
chunkFilename: '[id].css',
}),
new ExtractTextPlugin('styles.css', {
disable: process.env.NODE_ENV === 'development',
}),
],
module: {
rules: [
{
test: /\.(js)$/,
exclude: /node_modules/,
use: ['babel-loader']
},
{
test: /\.s[ac]ss$/i,
use: ExtractTextPlugin.extract({
use: [{
loader: "css-loader"
}, {
loader: "sass-loader"
}, {
loader: "postcss-loader"
}],
// use style-loader in development
fallback: "style-loader"
})
},
],
},
entry: {
scripts: path.resolve(SRC, 'js', 'index.js')
},
output: {
// Put all the bundled stuff in your dist folder
path: DIST,
// Our single entry point from above will be named "scripts.js"
filename: '[name].js',
// The output path as seen from the domain we're visiting in the browser
publicPath: ASSETS
},
}
运行build命令后,我得到:
TypeError:编译器. plugin不是函数
从plugin
中删除new ExtractTextPlugin
,错误消失了,但出现了另一个错误,说明需要它。我也看了Tailwinds' example,但没有任何运气。我也看了ExtractTextWebpackPlugin文档,但...没有运气,同样的错误。
本项目使用*.scss, *.css, *.js, *.tpl, *.php
感谢您的帮助或指点。
谢谢。
1条答案
按热度按时间z31licg01#
此插件已弃用。请用途:https://github.com/webpack-contrib/mini-css-extract-plugin