装载 SASS 模块C. TypeScript 在 Webpack 2
我有一个简单的项目使用 TypeScript, ReactJS 和 SASS, 我想 bundle 所有用它 Webpack. 有许多关于如何实现此目的的文档 JavaScript 和普通的老 CSS. 但是，我找不到组合您需要的下载器的任何文档并使用语法 Webpack 2 /而不是源语法 Webpack 对于bootloaders./. 因此，我不确定如何创建正确的配置。
你可以找到我的
https://gist.github.com/jessic ... de853
.
好像我更改了配置 TypeScript 接受我的模块 SCSS 并 Webpack 正确连接 SCSS 和我的 TypeScript?
它也很有用：当我运行时 Webpack 此刻，我收到以下错误：
注意
- 这是我的应用程序的入学点，
- 我唯一的组成部分 React, 和
-Moy是唯一的文件 SCSS.
你可以找到我的
https://gist.github.com/jessic ... de853
.
好像我更改了配置 TypeScript 接受我的模块 SCSS 并 Webpack 正确连接 SCSS 和我的 TypeScript?
它也很有用：当我运行时 Webpack 此刻，我收到以下错误：
ERROR in ./node_modules/css-loader!./node_modules/typings-for-css-modules-loader/lib?{"namedExport":true,"camelCase":true}!./node_modules/sass-loader/lib/loader.js!./src/raw/components/styles.scss
Module build failed: Unknown word /1:1/
> 1 | exports = module.exports = require/"../../../node_modules/css-loader/lib/css-base.js"//undefined/;
| ^
2 | // imports
3 |
4 |
@ ./src/raw/components/styles.scss 4:14-206
@ ./src/raw/components/greetings/greetings.tsx
@ ./src/raw/index.tsx
@ multi ./src/raw/index.tsx
ERROR in [at-loader] ./src/raw/components/greetings/greetings.tsx:3:25
TS2307: Cannot find module '../styles.scss'.注意
./src/raw/index.tsx
- 这是我的应用程序的入学点，
./src/raw/components/greetings/greeting.tsx
- 我唯一的组成部分 React, 和
./src/raw/components/styles.scss
-Moy是唯一的文件 SCSS.
没有找到相关结果
已邀请:
2 个回复
小姐请别说爱
赞同来自:
-
https://github.com/Jimdo/typin ... oader
替代
/从技术上讲，它使用
在引擎盖下/, 这意味着他需要 CSS 并将其转换为 JavaScript. 您也使用
, 它失败了，因为他得到了 JavaScript, 但预料 CSS /只要 JavaScript 不允许 CSS, 他无法分析/.
此外，您不使用模块 CSS, 因为您没有安装参数
在装载机中 CSS /或者
, 谁将它传递给
/.
你的规则
必须是：
{test: /\.scss$/,
include: [
path.resolve/__dirname, "src/raw"/
],
use: [
{ loader: "style-loader" },
{
loader: "typings-for-css-modules-loader",
options: {
namedexport: true,
camelcase: true,
modules: true
}
},
{ loader: "sass-loader" }
]
}
冰洋
赞同来自:
/, 从过时获得
.
在谁 - 这将面临同样的问题 - 这是一种适用于我的配置：
TypeScript + WebPack + Sass
module.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
] },
]
}
};
还有
在您的项目中：
所有这一切都需要在你的
开发依赖性：
"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"
}
然后你应该得到
在你的旁边
, 包含您定义的类 CSS, 您可以将其作为模块导入 Typescript 并使用如下：
CSS 将自动加载 /作为一个元素输入
在 DOM/ 并包含加密标识符而不是您的类 CSS 在 .scss, 在页面上隔离您的样式 /如果你不使用
:global/.a-global-class/ { ... }/.
注意
第一个汇编失败了
每当你添加类时 CSS, 删除它们或重命名它们，因为导入的mystyles.d.ts是一个旧版本，而不是刚刚在编译期间生成的新版本。 只是再次编译。
享受。