gulp + webpack + css-loader + машинопись: «не могу найти модуль»

Я хочу использовать css-loader с функцией :local() в моей dev-настройке. неgulp + webpack + css-loader + машинопись: «не могу найти модуль»

Нет ошибки:import './sidebar.css';

компилируется без проблем, но тогда я не знаю, как получить доступ к локальным именам классов внутри моего .tsx файла.

Ошибка:import classNames from './sidebar.css';

Здесь я получаю: error TS2307: Cannot find module './sidebar.css'

Объясняя мои настройки:

.tsx файлы компилируются в CommonJS модули через Глоток-машинописи (ES5)
CommonJS модули скомпилированы & подключен к JS через webpack

sidebar.tsx (импортируется в app.tsx, если это имеет значение)

import classNames from './sidebar.css';

sidebar.css

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

gulpfile.js

Глоток задача компиляции .tsx файлов CommonJS модули (работает до того WebPack-задачи, конечно):

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); 
     } 
    }); 
});

Что я делаю неправильно?

Edit: Я только что нашел это: https://github.com/Microsoft/TypeScript/issues/2709 , но я не совсем понимаю. Означает ли это, что я должен объявить свой CSS как модуль?

источник

2015-10-21 Felix Hagspiel

Вы можете переписать машинопись с помощью webpack, вам не нужно использовать глоток. Проверьте статью для получения более подробной информации: http: //www.jbrantly.com/typescript-and-webpack/ – TSV

Я знаю, но это не решает проблему. то же самое с обычным webpack –

Чтобы загрузить ресурсы не-ts, просто объявите функцию require и используйте импортированные ресурсы (как any).

Документация: https://github.com/TypeStrong/ts-loader#code-splitting-and-loading-other-resources

источник

2015-10-21 23:04:57 basarat

Я пытаюсь использовать CSS, как в https://github.com/css-modules/webpack-demo/tree/master/src/components, поэтому мне нужно назначить импортированный css переменной. Можете ли вы привести пример о том, как достичь этого? – Shady

машинопись не может загрузить или понять CSS файлы, но он будет работать с WebPack. Чтобы сообщить TypeScript, что есть файлы с концом, отличным от * .ts, вы должны объявить подстановочный модуль для соответствующего типа файла. Просто поместите его в файл * .d.ts, который вы включите в проект.

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

источник

2017-02-02 22:16:36 Kalle

это работает. идеально ! – tvrcgo

gulp + webpack + css-loader + машинопись: «не могу найти модуль»

ответ

Смежные вопросы