docs: additionalData option for sass-loader 9.0 (#5673) [ci skip]

This commit is contained in:
Yazhe Wang
2020-07-13 16:21:07 +08:00
committed by GitHub
parent 256e136a75
commit 38234ef74c
3 changed files with 12 additions and 25 deletions

View File

@@ -133,17 +133,17 @@ module.exports = {
// pass options to sass-loader
// @/ is an alias to src/
// so this assumes you have a file named `src/variables.sass`
// Note: this option is named as "data" in sass-loader v7
// Note: this option is named as "prependData" in sass-loader v8
sass: {
prependData: `@import "~@/variables.sass"`
additionalData: `@import "~@/variables.sass"`
},
// by default the `sass` option will apply to both syntaxes
// because `scss` syntax is also processed by sass-loader underlyingly
// but when configuring the `data` option
// but when configuring the `prependData` option
// `scss` syntax requires an semicolon at the end of a statement, while `sass` syntax requires none
// in that case, we can target the `scss` syntax separately using the `scss` option
scss: {
prependData: `@import "~@/variables.scss";`
additionalData: `@import "~@/variables.scss";`
},
// pass Less.js Options to less-loader
less:{

View File

@@ -135,17 +135,17 @@ module.exports = {
// передача настроек в sass-loader
// @/ это псевдоним к каталогу src/ поэтому предполагается,
// что у вас в проекте есть файл `src/variables.scss`
// Примечание: эта опция называется "data" в sass-loader v7
// Примечание: эта опция называется "prependData" в sass-loader v8
sass: {
prependData: `@import "~@/variables.sass"`
additionalData: `@import "~@/variables.sass"`
},
// по умолчанию опция `sass` будет применяться к обоим синтаксисам
// потому что синтаксис `scss` по сути также обрабатывается sass-loader
// но при настройке опции `data` синтаксис `scss` требует точку с запятой
// но при настройке опции `prependData` синтаксис `scss` требует точку с запятой
// в конце оператора, в то время как для `sass` точки с запятой не требуется
// в этом случае синтаксис `scss` можно настроить отдельно с помощью опции `scss`
scss: {
prependData: `@import "~@/variables.scss";`
additionalData: `@import "~@/variables.scss";`
},
// передача настроек Less.js в less-loader
less:{

View File

@@ -126,29 +126,16 @@ module.exports = {
sass: {
// @/ 是 src/ 的别名
// 所以这里假设你有 `src/variables.sass` 这个文件
// 注意:在 sass-loader v7 中,这个选项名是 "data"
prependData: `@import "~@/variables.sass"`
// 注意:在 sass-loader v8 中,这个选项名是 "prependData"
additionalData: `@import "~@/variables.sass"`
},
// 默认情况下 `sass` 选项会同时对 `sass` 和 `scss` 语法同时生效
// 因为 `scss` 语法在内部也是由 sass-loader 处理的
// 但是在配置 `data` 选项的时候
// 但是在配置 `prependData` 选项的时候
// `scss` 语法会要求语句结尾必须有分号,`sass` 则要求必须没有分号
// 在这种情况下,我们可以使用 `scss` 选项,对 `scss` 语法进行单独配置
scss: {
// sass-loader v8语法
// prependData: `@import "~@/variables.scss";`
// sass-loader v9语法
additionalData(content, loaderContext) {
const { resourcePath, rootContext } = loaderContext;
const relativePath = path.relative(rootContext, resourcePath);
if (
relativePath.replace(/\\/g, "/") !== "src/styles/variables.scss"
) {
return '@import "~@/styles/variables.scss";' + content;
}
return content;
},
additionalData: `@import "~@/variables.scss";`
},
// 给 less-loader 传递 Less.js 相关选项
less:{