Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/379.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 用webpack从scss文件中提取css_Javascript_Css_Node.js_Npm_Webpack - Fatal编程技术网

Javascript 用webpack从scss文件中提取css

Javascript 用webpack从scss文件中提取css,javascript,css,node.js,npm,webpack,Javascript,Css,Node.js,Npm,Webpack,我正在尝试将webpack用于我的asp.NETMVC核心项目。我能够捆绑js文件。但是我不能从scss文件中提取css var path = require('path'); var extractTextPlugin = require("extract-text-webpack-plugin"); var cleanWebpackPlugin = require('clean-webpack-plugin'); module.exports = { entry: {

我正在尝试将webpack用于我的asp.NETMVC核心项目。我能够捆绑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中导入的样式文件等。否则插件将无法工作,因为它找不到任何要提取的文件


是否在main.ts中导入了.scss文件?