Я пытаюсь импортировать тему из модуля CSS, но TypeScript выдает ошибку «Не удается найти модуль», и тема не применяется во время выполнения. Я думаю, что что-то не так с моей конфигурацией Webpack, но я не уверен, в чем проблема.
Я использую следующие инструменты:
"typescript": "^2.0.3"
"webpack": "2.1.0-beta.25"
"webpack-dev-server": "^2.1.0-beta.9"
"react": "^15.4.0-rc.4"
"react-toolbox": "^1.2.3"
"node-sass": "^3.10.1"
"style-loader": "^0.13.1"
"css-loader": "^0.25.0"
"sass-loader": "^4.0.2"
"sass-lint": "^1.9.1"
"sasslint-webpack-plugin": "^1.0.4"
Вот мой webpack.config.js
var path = require('path');
var webpack = require('webpack');
var sassLintPlugin = require('sasslint-webpack-plugin');
module.exports = {
entry: [
'webpack-dev-server/client?http://localhost:8080',
'webpack/hot/dev-server',
'./src/index.tsx',
],
output: {
path: path.resolve(__dirname, 'dist'),
publicPath: 'http://localhost:8080/',
filename: 'dist/bundle.js',
},
devtool: 'source-map',
resolve: {
extensions: ['.webpack.js', '.web.js', '.ts', '.tsx', '.js'],
},
module: {
rules: [{
test: /\.js$/,
loader: 'source-map-loader',
exclude: /node_modules/,
enforce: 'pre',
}, {
test: /\.tsx?$/,
loader: 'tslint-loader',
exclude: /node_modules/,
enforce: 'pre',
}, {
test: /\.tsx?$/,
loaders: [
'react-hot-loader/webpack',
'awesome-typescript-loader',
],
exclude: /node_modules/,
}, {
test: /\.scss$/,
loaders: ['style', 'css', 'sass']
}, {
test: /\.css$/,
loaders: ['style', 'css']
}],
},
externals: {
'react': 'React',
'react-dom': 'ReactDOM'
},
plugins: [
new sassLintPlugin({
glob: 'src/**/*.s?(a|c)ss',
ignoreFiles: ['src/normalize.scss'],
failOnWarning: false, // Do it.
}),
new webpack.HotModuleReplacementPlugin(),
],
devServer: {
contentBase: './'
},
};
и мой, App.tsxкуда я пытаюсь импортировать:
import * as React from 'react';
import { AppBar } from 'react-toolbox';
import appBarTheme from 'react-toolbox/components/app_bar/theme.scss'
// local ./theme.scss stylesheets aren't found either
interface IAppStateProps {
// No props yet
}
interface IAppDispatchProps {
// No state yet
}
class App extends React.Component<IAppStateProps & IAppDispatchProps, any> {
constructor(props: IAppStateProps & IAppDispatchProps) {
super(props);
}
public render() {
return (
<div className='wrapper'>
<AppBar title='My App Bar' theme={appBarTheme}>
</AppBar>
</div>
);
}
}
export default App;
Что еще требуется для включения импорта модуля таблиц стилей безопасного типа?
typescript
import
sass
webpack
css-modules
закданс
источник
источник
Вот полная конфигурация, которая мне подходит (я только что потратил на это час мучительных проб и ошибок - на случай, если кто-то столкнется с теми же проблемами):
TypeScript + WebPack + Sass
webpack.config.jsmodule.exports = { //mode: "production", mode: "development", devtool: "inline-source-map", entry: [ "./src/app.tsx"/*main*/ ], output: { filename: "./bundle.js" // in /dist }, resolve: { // Add `.ts` and `.tsx` as a resolvable extension. extensions: [".ts", ".tsx", ".js", ".css", ".scss"] }, module: { rules: [ { test: /\.tsx?$/, loader: "ts-loader" }, { test: /\.scss$/, use: [ { loader: "style-loader" }, // to inject the result into the DOM as a style block { loader: "css-modules-typescript-loader"}, // to generate a .d.ts module next to the .scss file (also requires a declaration.d.ts with "declare modules '*.scss';" in it to tell TypeScript that "import styles from './styles.scss';" means to load the module "./styles.scss.d.td") { loader: "css-loader", options: { modules: true } }, // to convert the resulting CSS to Javascript to be bundled (modules:true to rename CSS classes in output to cryptic identifiers, except if wrapped in a :global(...) pseudo class) { loader: "sass-loader" }, // to convert SASS to CSS // NOTE: The first build after adding/removing/renaming CSS classes fails, since the newly generated .d.ts typescript module is picked up only later ] }, ] } };Также добавьте
declarations.d.tsв свой проект:// We need to tell TypeScript that when we write "import styles from './styles.scss' we mean to load a module (to look for a './styles.scss.d.ts'). declare module '*.scss';И все это вам понадобится в ваших
package.jsondev-зависимостях:"devDependencies": { "@types/node-sass": "^4.11.0", "node-sass": "^4.12.0", "css-loader": "^1.0.0", "css-modules-typescript-loader": "^2.0.1", "sass-loader": "^7.1.0", "style-loader": "^0.23.1", "ts-loader": "^5.3.3", "typescript": "^3.4.4", "webpack": "^4.30.0", "webpack-cli": "^3.3.0" }Затем вы должны получить
mystyle.d.tsрядом с вашимиmystyle.scssклассами CSS, которые вы определили, которые вы можете импортировать как модуль Typescript и использовать следующим образом:import * as styles from './mystyles.scss'; const foo = <div className={styles.myClass}>FOO</div>;CSS будет автоматически загружен (введен как
styleэлемент в DOM) и будет содержать загадочные идентификаторы вместо ваших классов CSS в .scss, чтобы изолировать ваши стили на странице (если вы не используете:global(.a-global-class) { ... }).Обратите внимание, что первая компиляция завершится ошибкой всякий раз, когда вы добавляете классы CSS, удаляете или переименовываете их, поскольку импортированный mystyles.d.ts - это старая версия, а не новая версия, только что созданная во время компиляции. Просто скомпилируйте снова.
Наслаждаться.
источник
global.d.tsв мойsrcкаталог вместе с перемещением ts-loader ниже загрузчиков стилей исправило это для меня.Внимание, если вы используете настройку пути tsconfig.json
Обратите внимание, что если вы используете эти решения вместе с путями tsconfig для сокращения импорта, вам потребуется дополнительная настройка.
Если вы используете такой путь tsconfig:
{ "compilerOptions": { "paths": { "style/*": [ "src/style/*" ], } } }Итак, вы можете:
import { header } from 'style/ui.scss';Затем вам нужно также добавить конфигурацию разрешения модулей в свой веб-пакет, например:
module.exports = { ... resolve: { ... alias: { style: path.resolve(__dirname, 'src', 'style') } } }Убедитесь, что путь установлен в соответствии с вашими настройками.
Благодаря этому webpack знает, где искать, поскольку он считает, что новый путь импорта на самом деле является модулем, поэтому по умолчанию используется каталог node_modules. С этой конфигурацией он знает, где искать, и находит, и сборка работает.
источник
Я использую typescript-plugin-css-modules
npm install -D typescript-plugin-css-modulestsconfig.json
{ "compilerOptions": { "plugins": [{ "name": "typescript-plugin-css-modules" }] } }источник