我使用TypeScript,ReactJS和SASS设置了一个简单的项目,并希望使用Webpack将其全部捆绑。有关如何使用JavaScript和常规旧CSS实现此目的的大量文档。但是,我找不到任何组合我需要的加载器的文档,并使用Webpack 2语法(而不是加载器的原始Webpack语法)。因此,我不确定如何创建正确的配置。
您可以找到我的webpack.config.js
file here。 如何修改配置,以便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
是我唯一的SCSS文件。
答案 0 :(得分:6)
typings-for-css-modules-loader
是css-loader
的替代品(技术上它在引擎盖下使用css-loader
),这意味着它需要CSS并将其转换为JavaScript。您还使用了css-loader
,但由于它接收了JavaScript,但是期望的CSS(因为JavaScript不是有效的CSS,它无法解析),因此失败了。
此外,您没有使用CSS模块,因为您没有在CSS加载器上设置modules: true
选项(或typings-for-css-modules-loader
,将其传递给css-loader
)。< / p>
您的.scss
规则应为:
{
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" }
]
}
答案 1 :(得分:0)
这是一个稍微扩展的版本(因为以上内容对我来说不起作用),使用了从过时的css-modules-typescript-loader
派生的另一个软件包(typings-for-css-modules-loader
)。
万一有人遇到相同的问题-这是一种对我有用的配置:
TypeScript + WebPack + Sass
webpack.config.js
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
] },
]
}
};
还要在项目中放置一个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.json
的dev-dependencies中满足所有这些要求:
"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中),并包含隐式标识符而不是.scss中的CSS类,以隔离页面中的样式(除非您使用{{ 1}})。
请注意,无论何时添加CSS类或删除它们或重命名它们,第一次编译都会失败,因为导入的mystyles.d.ts是旧版本,而不是编译期间刚刚生成的新版本。只是再次编译。
享受。