mirror of
https://github.com/vuejs/vue-cli.git
synced 2026-03-07 15:00:47 -06:00
docs: additionalData option for sass-loader 9.0 (#5673) [ci skip]
This commit is contained in:
@@ -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:{
|
||||
|
||||
@@ -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:{
|
||||
|
||||
@@ -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:{
|
||||
|
||||
Reference in New Issue
Block a user