विक्रेता सीएसएस आयात कर रहा है जब webpack + सीएसएस घटकों

Question

का उपयोग कर रहा तरह फ़ॉन्ट भयानक और प्रतिक्रिया और सीएसएस मॉड्यूल लेकिन मैं इसे समझ नहीं उन्हें ठीक से अपने प्रोजेक्ट में आयात करने के लिए कैसे के साथ नींव चीजों का उपयोग करने के कोशिश कर रहा हूँ ।

ध्यान दें कि मैं एक एकल सीएसएस फ़ाइल प्राप्त करने के लिए HotModuleReplacementPlugin और ExtractTextPlugin का उपयोग कर रहा हूं।

कहीं शीर्ष स्तर के घटक की सीएसएस फ़ाइल में मैं केवल @import 'font-awesome'; करने में सक्षम होना चाहता हूं लेकिन मैं यह कैसे कर सकता हूं ताकि फ़ाइल के रूप में माना जाएगा और कक्षाएं स्थानीयकृत नहीं हो जाएंगी font_awesome__fa-check और ऐसे?

var paths = { 
    app: path.join(__dirname, './app/'), 
    dist: path.join(__dirname, './dist/'), 
    external: path.join(__dirname, './node_modules/'), 
} 
module.exports = { 
    entry: { 
    site: [ 
     'webpack-dev-server/client?http://localhost:5000', 
     'webpack/hot/dev-server', 
     path.join(paths.app, '/index.js'), 
    ] 
    }, 
    output: { 
    path: paths.dist, 
    publicPath: '/', 
    filename: 'scripts/[name].[hash].js', 
    chunkFilename: '[name].[chunkhash].js' 
    }, 
    resolve: { 
    extensions: ['', '.js'], 
    root: paths.app, 
    alias: { 
     'font-awesome.css': path.join(paths.external, '/font-awesome/css/font-awesome.min.css') 
    } 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.jsx?$/, 
     loaders: ['babel'], 
     include: path.join(__dirname, 'app') 
     }, 
     { 
     test: /\.css$/, 
     loader: ExtractTextPlugin.extract('style-loader', 'css-loader?modules&localIdentName=[name]__[local]&importLoaders=1', 'postcss-loader') 
     } 
    ] 
    }, 
    postcss: [ 
    require('autoprefixer-core'), 
    ], 
    devtool: 'inline-source-map', 
    plugins: [ 
    new webpack.HotModuleReplacementPlugin(), 
    new webpack.NoErrorsPlugin(), 
    new ExtractTextPlugin("styles/[name].[chunkhash].css", {allChunks: true}), 
    new HtmlWebpackPlugin({ 
     template: path.join(paths.app, '/site.html'), 
     filename: 'index.html', 
     inject: 'body', 
     chunks: ['site'] 
    }), 
    ] 
}; 

धन्यवाद:

यह मेरा webpack config है।

Answer 1

लोडर को कॉन्फ़िगर करते समय आप विकल्प को शामिल/बहिष्कृत कर सकते हैं।

उदा। यह देखते हुए कि आपका सभी कस्टम सीएसएस /app/ निर्देशिका में कहीं है, जबकि नींव और फ़ॉन्ट-भयानक नहीं हैं।

... 
module: { 
    loaders: [ 

     { 
     test: /\.css$/, 
     loader: ExtractTextPlugin.extract('style-loader', 'css-loader?modules&localIdentName=[name]__[local]&importLoaders=1', 'postcss-loader'), 
     include: path.join(__dirname, 'app') 
     }, 
     { 
     test: /\.css$/, 
     loader: ExtractTextPlugin.extract('style-loader!css-loader'), 
     exclude: path.join(__dirname, 'app') 
     } 
    ] 
}, 

एक और विकल्प सीएसएस-मॉड्यूल सिंटैक्स का उपयोग करने वाली फ़ाइलों के लिए अलग-अलग एक्सटेंशन का उपयोग करना है। आप .mcss का उपयोग कर सकते हैं।

... 
module: { 
    loaders: [ 
     { 
     test: /\.mcss$/, 
     loader: 'css-loader?modules&localIdentName=[name]__[local]&importLoaders=1' 
     }, 
     { 
     test: /\.css$/, 
     loader: 'css-loader') 
     } 
    ], 
    postLoaders: [ 
     { 
      test: /\.(css|mcss)$/, 
      loader: ExtractTextPlugin.extract('style-loader') 
     } 
    ] 
},