गल्प + वेबपैक + सीएसएस-लोडर + टाइपस्क्रिप्ट: "मॉड्यूल नहीं मिल सकता"

Question

मैं अपने देव-सेटअप में :local() फ़ंक्शन के साथ css-loader का उपयोग करना चाहता हूं।

कोई त्रुटि:import './sidebar.css';

यह समस्या बिना संकलित, लेकिन फिर मैं कैसे मेरे .tsx फाइल के अंदर स्थानीय classnames उपयोग करने के लिए नहीं जानता।

त्रुटि:import classNames from './sidebar.css';

यहाँ मैं मिलता है:

1. .tsx फ़ाइलों घूंट-टाइपप्रति के माध्यम से मॉड्यूल (ES5)
2. commonjs commonjs को संकलित किए जाते हैं: error TS2307: Cannot find module './sidebar.css'

   मेरी सेटअप की व्याख्या मॉड्यूल संकलित & वेबपैक

के माध्यम से जेएस को छोटा कर दिया गया है

sidebar.tsx (app.tsx में आयात होता है कि अगर मायने रखती है)

import classNames from './sidebar.css';

sidebar.css

.sl-sidebar { 
    background-color: yellow; 
} 

gulpfile.js

Gulp कार्य (से पहले निश्चित रूप से webpack कार्य रन) मॉड्यूल commonJS को .tsx फ़ाइलें संकलन:

gulp.task('gui-tsx', function() { 
    return gulp.src(config.guiTsxPath + '**/*.tsx') 
     .pipe(ts({ 
      jsx: 'react', 
      outDir: config.guiCompiledPath, 
      module: 'commonjs', 
      target: 'ES5' 
     })) 
     .pipe(gulp.dest(config.guiCompiledPath)); 
}); 

मेरे घूंट-webpack कार्य:

gulp.task('gui-webpack', function() { 
    webpack({ 
     bail: false, 
     debug: true, 
     entry: './' + config.guiCompiledPath + 'app.js', 
     output: { 
      filename: "gui.js", 
      path: './' + config.pubPath + 'js' 
     }, 
     devtool: "#inline-source-map", 
     plugins: [ 
      new webpack.optimize.UglifyJsPlugin({ 
       compress: { 
        warnings: false 
       }, 
       output: { 
        comments: false, 
        semicolons: true 
       }, 
       sourceMap: true 
      }) 
     ], 
     module: { 
      loaders: [ { 
       test: /\.css$/, 
       loader: 'style-loader!css-loader?modules' 
      }] 
     } 

    }, function (err, stats) { 
     if (stats.compilation.errors.length > 0) { 
      console.log(stats.compilation.errors[0].message); 
     } 
    }); 
}); 

क्या मैं गलत कर रहा हूँ?

संपादित करें: मैं सिर्फ यह पाया: https://github.com/Microsoft/TypeScript/issues/2709 लेकिन मैं न काफी यह समझते हैं। क्या इसका मतलब है कि मुझे अपने सीएसएस को मॉड्यूल के रूप में घोषित करना है?

Answer 1

गैर-टीएस संसाधनों को लोड करने के लिए बस require फ़ंक्शन घोषित करें और आयातित संसाधनों का उपयोग करें (any के रूप में)।

प्रलेखन: https://github.com/TypeStrong/ts-loader#code-splitting-and-loading-other-resources

Answer 2

टाइपप्रति लोड कर सकते हैं नहीं या सीएसएस फ़ाइलों को समझते हैं, लेकिन यह webpack साथ काम करेंगे। टाइपस्क्रिप्ट को बताने के लिए कि * .ts के अलावा किसी अन्य के साथ फाइलें हैं, आपको फ़ाइल फ़ाइल के अनुसार वाइल्डकार्ड मॉड्यूल घोषित करना होगा। बस इसे * .d.ts फ़ाइल में डालें जिसे आप प्रोजेक्ट में शामिल करते हैं।

// declaration.d.ts 
declare module '*.css' { 
    const content: any; 
    export default content; 
}