Sass 提取文本插件不从.scss提取css
我有以下webpack.cofig.js文件Sass 提取文本插件不从.scss提取css,sass,webpack,extract-text-plugin,Sass,Webpack,Extract Text Plugin,我有以下webpack.cofig.js文件 var path = require('path'); var webpack = require('webpack'); var HtmlWebpackPlugin = require('html-webpack-plugin'); const ExtractTextPlugin = require("extract-text-webpack-plugin"); module.exports = { entry: { app: './
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry: {
app: './src/main.ts',
polyfills: './src/polyfills.ts'
},
output: {
path: path.resolve('dist'),
filename: '[name].js',
publicPath: 'assets/'
},
resolve: {
// only discover files that have those extensions
extensions: ['.ts', '.js', '.json', '.css', '.scss', '.html'],
},
module: {
rules: [{
test: /\.ts$/,
exclude: /node_modules/,
loader: 'awesome-typescript-loader'
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'sass-loader']
})
},
{
test: /\.html$/,
loader: 'html-loader'
},
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'file-loader?name=fonts/[name].[hash].[ext]?'
}
]
},
plugins: [
new ExtractTextPlugin({ filename: 'mystyle.css', disable: false, allChunks: true })
]
};
但是,当我运行此命令时,应该生成的css文件不会出现。我正在使用提取文本网页包插件,但这不起作用。它不会抛出错误,但也不起作用。您正在尝试从导入的模块中提取,而不是从ExtractTextPlugin实例本身提取。您需要做的是实例化一个新的ExtractTextPlugin对象,并在插件和加载程序中使用它
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const CssMain = new ExtractTextPlugin({ filename: 'mystyle.css', disable: false, allChunks: true });
....
module: {
rules: [
....
{
test: /\.scss$/,
use: CssMain.extract({
fallback: 'style-loader',
use: ['css-loader', 'sass-loader']
})
}
....
]
},
plugins: [
....
CssMain
....
]
....
好的,我让它工作了,原因是在我的根应用程序组件(angular2)中,我有以下引用主样式表的内容
styleUrls: ['./app.component.scss'],
即使没有scss加载器(我使用的是非常棒的typescript加载器),它也可以很好地工作。然而,当我包括以下内容时
const styles = require('./app.component.scss');
然后生成了附加的css