[英]extracting css from scss file with webpack
我正在尝试将webpack与asp.net mvc核心项目一起使用。 我可以捆绑js文件。 但是我无法从scss文件中提取CSS。
var path = require('path');
var extractTextPlugin = require("extract-text-webpack-plugin");
var cleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: {
'role/role': './scripts/role/roleVM.ts',
main: './scripts/main.ts',
vendor: ["jquery"],
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'wwwroot/dist/js/')
},
module: {
rules: [
{
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/,
},
{
test: /\.scss$/,
use: extractTextPlugin.extract({
use: [{
loader: "css-loader", options: {
sourceMap: true
}
}, {
loader: "sass-loader", options: {
sourceMap: true
}
}],
fallback: 'style-loader'
}),
exclude: /node_modules/,
},
]
},
plugins: [
new cleanWebpackPlugin(['dist'], {
root: path.resolve(__dirname, 'wwwroot'),
verbose: true,
dry: false
}),
new extractTextPlugin("./css/main.css")
],
resolve: {
extensions: [".tsx", ".ts", ".js", '.scss']
}
};
当我构建项目时,不会创建css文件
我的命令:
npm run build --color=always
> project@1.0.0 build C:\project\src\test
> webpack
clean-webpack-plugin: C:\project\src\project\wwwroot\dist has been removed.
ts-loader: Using typescript@2.4.2 and C:\project\src\project\tsconfig.json
Hash: 2cdaff8d8177eedec094
Version: webpack 3.5.3
Time: 2203ms
Asset Size Chunks Chunk Names
role/role.js 293 kB 0 [emitted] [big] role/role
vendor.js 271 kB 1 [emitted] [big] vendor
main.js 2.48 kB 2 [emitted] main
[0] ./scripts/role/roleVM.ts 400 bytes {0} [built]
[2] ./scripts/main.ts 0 bytes {2} [built]
[3] multi jquery 28 bytes {1} [built]
它似乎跳过传递提取文本插件。
我的配置文件中缺少任何内容吗?
我当前的项目结构:
└── Project
├── wwwroot
│ └── scss
│ └── main.scss
└── scripts
│ └── main.ts
│
└── webpack.config.js
检查您是否在某处引用了样式文件(将其导入main.ts等)。 否则,该插件将无法工作,因为它将找不到任何要提取的文件。
https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/354
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.