[英]How to enable SASS Modules in Webpack 4
In my Node React web application written in TypeScript and TSX, I make use of CSS modules. 在用TypeScript和TSX编写的Node React Web应用程序中,我使用了CSS模块。 Hence, when building the application I instruct Webpack to create a
style.css.d.ts
file out of a style.css
so that I can access its classes like any other param by importing the CSS file into the TypeScript class with import * as style from "./style.css";
因此,构建我指导的WebPack创建一个应用程序时
style.css.d.ts
文件出的style.css
,这样我可以通过导入CSS文件到打字稿类访问像任何其他PARAM它的类import * as style from "./style.css";
and then access the params like this: 然后访问这样的参数:
export class Foot extends React.Component<FootProps, {}> {
render() {
return <div className={style.foot}>© MySite</div>;
}
}
What I'd like to do now is change from CSS to the SASS format SCSS and basically do the same thing. 我现在想做的就是从CSS更改为SASS格式的SCSS,基本上可以做同样的事情。 I want to have my SASS file ie
style.scss
and instruct Webpack to create a style.scss.d.ts
file at build time. 我想拥有我的SASS文件,即
style.scss
并指示Webpack在构建时创建style.scss.d.ts
文件。 Though I can't figure out how to do that. 虽然我不知道该怎么做。
Module rule in my webpack.config.js
: 我的
webpack.config.js
模块规则:
module: {
rules: [
// All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
{ test: /\.tsx?$/, loader: "awesome-typescript-loader" },
// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
{ enforce: "pre", test: /\.js$/, loader: "source-map-loader" },
{ test: /\.css$/, use: [
"style-loader",
{ loader: "typings-for-css-modules-loader", options: { modules: true, namedExport: true, camelCase: true, localIdentName: "[name]_[local]_[hash:base64]" }}
] },
{ test: /\.(scss)$/, use : [
{
// Adds CSS to the DOM by injecting a `<style>` tag.
loader: "style-loader"
},
{
// Interprets `@import` and `url()` like `import/require()` and will resolve them.
loader: "css-loader"
},
{
// Loader for webpack to process CSS with PostCSS.
loader: "postcss-loader",
options: {
plugins: function () {
return [
require("autoprefixer")
];
}
}
},
{
// Loads a SASS/SCSS file and compiles it to CSS.
loader: "sass-loader"
}
]
}
]
},
Dependencies in my package.json
: 我的
package.json
依赖项:
"dependencies": {
"@types/jquery": "^3.3.22",
"@types/react": "^16.4.18",
"@types/react-dom": "^16.0.9",
"bootstrap": "^4.1.3",
"jquery": "^3.3.1",
"popper.js": "^1.14.4",
"react": "^16.6.0",
"react-dom": "^16.6.0"
},
"devDependencies": {
"autoprefixer": "^9.3.1",
"awesome-typescript-loader": "^5.2.1",
"css-loader": "^1.0.1",
"html-webpack-plugin": "^3.2.0",
"node-sass": "^4.10.0",
"postcss-loader": "^3.0.0",
"sass-loader": "^7.1.0",
"source-map-loader": "^0.2.4",
"style-loader": "^0.23.1",
"typescript": "^3.1.6",
"typings-for-css-modules-loader": "^1.7.0",
"webpack": "^4.25.1",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.10"
}
What must I do to change from CSS modules to SASS Modules? 从CSS模块更改为SASS模块,我该怎么做?
I can't find any flaw in your rules.Better try the following: 我在您的规则中找不到任何缺陷。请尝试以下操作:
{
test: /\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
sourceMap: IS_DEV
}
}
]
},
{
test: /\.(scss)$/,
use: [
{
// Adds CSS to the DOM by injecting a `<style>` tag
loader: 'style-loader'
},
{
// Interprets `@import` and `url()` like `import/require()` and will resolve them
loader: 'css-loader'
},
{
// Loader for webpack to process CSS with PostCSS
loader: 'postcss-loader',
options: {
plugins() {
return [
require('autoprefixer')
];
}
}
},
{
// Loads a SASS/SCSS file and compiles it to CSS
loader: 'sass-loader'
}
]
}
This works for me. 这对我有用。
I found it out myself. 我自己发现的。 So, I post it here in hope to help you guys if you have the same problem - +1 like if it did help ;).
因此,如果您遇到相同的问题,我希望将其发布在这里,希望对您有所帮助- +1确实有帮助;)。
I had to pay attention to a Bootstrap SCSS import, so I had to use Webpack's exclude
and include
functionality for differentiating between local and global CSS imports. 我必须注意Bootstrap SCSS导入,因此必须使用Webpack的
exclude
和include
功能来区分本地和全局CSS导入。 Everything works fine now and these are my new module rules within my webpack.config.js
file: 现在一切正常,这是我的
webpack.config.js
文件中的新模块规则:
{
test: /\.css$/,
use: [
{ loader: "style-loader" },
{ loader: "typings-for-css-modules-loader", options: { modules: true, namedExport: true, camelCase: true, localIdentName: "[name]_[local]_[hash:base64]" }}
]
},
{
test: /\.scss$/,
exclude: /\.global.scss$/,
use : [
{ loader: "style-loader" },
{ loader: "typings-for-css-modules-loader", options: { modules: true, namedExport: true, camelCase: true, localIdentName: "[name]_[local]_[hash:base64]" }},
{ loader: "postcss-loader", options: { plugins: function () { return [ require("autoprefixer") ]; }}},
{ loader: "sass-loader" }
]
},
{
test: /\.scss$/,
include: /\.global.scss$/,
use : [
{ loader: "style-loader" },
{ loader: "css-loader" },
{ loader: "postcss-loader", options: { plugins: function () { return [ require("autoprefixer") ]; }}},
{ loader: "sass-loader" }
]
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.