2017-07-15 85 views
0

将css提取到单独的文件中我试图使用webpack将所有.css提取到单独的文件中。为此,我使用xtract-text-webpack-pluginwebpack使用extract-text-webpack-plugin

由于某种原因,我没有得到任何文件运行后运行网络包。

这里是我的webpack.config文件

var path = require('path'); 
var webpack = require('webpack'); 

const ExtractTextPlugin = require('extract-text-webpack-plugin'); 

const css = new ExtractTextPlugin('styles/[name].css'); 

module.exports = { 
    entry: [ 
     './App/main.js' 
    ], 
    output: { 
     path: path.join(__dirname, '/wwwroot/js/'), 
     filename: '[name].js', 
    }, 
    resolve: { 
     extensions: ['.css'] 
    }, 
    module: { 
     rules: [{ 
      test: /\.css$/, 
      use: ExtractTextPlugin.extract({ 
       use: 'css-loader' 
      }) 
     }] 
    }, 
    plugins: [ 
     css 
    ], 

} 

这是我输出在控制台

Hash: 81acf65502ca13764b09 
Version: webpack 3.2.0 
Time: 71ms 
    Asset  Size Chunks    Chunk Names 
main.js 2.62 kB  0 [emitted] main 
    [0] multi ./App/main.js 28 bytes {0} [built] 
    [1] ./App/main.js 27 bytes {0} [built] 

没有.css文件得到我的wwwroot文件夹中。 任何想法为什么发生这种情况?

这里是package.json文件

"dependencies": {}, 
    "devDependencies": { 
    "css-loader": "^0.28.4", 
    "extract-text-webpack-plugin": "^3.0.0", 
    "webpack": "^3.2.0" 
    } 

谢谢!

回答

0

我能弄明白这一点。

我的webpack配置是正确的。

有这样做,你可以要求.scss这个

1的方式有2种方法,它会提供的css文件的入口点。

第二个方式,你可以在你的WebPack

entry: { 
     index: "./scripts/index.js", 
     vendor: "./styles/yourcss.css" 
    } 
0

有很多方法可以做到这一点。这是我一直在做的方式....

module: { 
      rules: [ 
       { 
        test: /\.css$/, use: ExtractTextPlugin.extract(
         { use: isDevBuild ? 'css-loader' : 'css-loader?minimize' } 
        ) 
       } 
     }, 
     output: { path: path.join(__dirname, clientBundleOutputDir) }, 
     plugins: [ 
      new ExtractTextPlugin('site.css') 

所有我的这个配置的CSS,被提取到一个site.css文件。

+0

好像你正在做的我是同样的事情,创造第二个切入点。但我没有得到在输出中生成的任何css文件。这可能是webpack设置的地方? – kkdeveloper7

+0

不可以。你可以尝试'新的ExtractTextPlugin('site.css')'看看它是否适合你吗? – Yasser

+0

我改变了你的建议,没有生成'.css'。只有js文件已经生成。 – kkdeveloper7