我希望能够在@import语句中使用绝对路径。像这样：
@import '/templates/common/variables'
但是，sass似乎将其解析为我文件系统中的绝对URL。我希望它在我的项目文件夹中查找。例如。我的文件实际上位于/home/username/project/templates/common/_variables.scss
有什么可能吗？
我已经看过includePaths，但这似乎什么也没做。
我正在使用Encore编写我的webpack文件，看起来大致像这样：
const Encore = require('@symfony/webpack-encore');
Encore
.setOutputPath("web/build/")
.setPublicPath("/build")
// [...]
.enableSassLoader(options => {
options.includePaths = [path.resolve(__dirname, '/web')];
})
;
这也是生成的webpack配置（很长，我还没有用上面的示例路径替换我的真实路径）：
{
context:'/var/www',
entry:{
index:[
'./polyfills.js',
'./web/typo3conf/ext/hn_project/ext_index.js',
'./web/typo3conf/ext/hn_templates/ext_index.js'
],
backend:[
'./polyfills.js',
'./web/typo3conf/ext/hn_project/ext_backend.js'
]
},
output:{
path:'/var/www/web/build',
filename:'[name].[chunkhash:8].js',
publicPath:'/build/',
pathinfo:false
},
module:{
rules:[
{
test:/\.jsx?$/,
exclude:/(node_modules|bower_components)/,
use:[
{
loader:'babel-loader',
options:{
cacheDirectory:true,
presets:[
[
'env',
{
modules:false,
targets:{
browsers:[
'and_chr 67',
'and_uc 11.8',
'chrome 67',
'chrome 66',
'chrome 65',
'edge 17',
'edge 16',
'firefox 60',
'firefox 59',
'firefox 52',
'ie 11',
'ie 10',
'ie_mob 11',
'ie_mob 10',
'ios_saf 11.3',
'ios_saf 11.0-11.2',
'opera 53',
'opera 52',
'safari 11.1',
'safari 11',
'samsung 6.2'
],
uglify:true
},
useBuiltIns:true
}
]
],
plugins:[
]
}
}
]
},
{
test:/\.css$/,
use:[
{
loader:'/var/www/node_modules/extract-text-webpack-plugin/dist/loader.js',
options:{
omit:1,
remove:true
}
},
{
loader:'style-loader'
},
{
loader:'css-loader',
options:{
minimize:true,
sourceMap:false,
importLoaders:1
}
},
{
loader:'postcss-loader',
options:{
sourceMap:false,
ident:'postcss',
plugins:[
{
[
Function:plugin
] options:{
grid:false
},
browsers:undefined,
info:[
Function
],
postcssPlugin:'autoprefixer',
postcssVersion:'6.0.23'
}
]
}
}
]
},
{
test:/\.(png|jpg|jpeg|gif|ico|svg|webp)$/,
loader:'url-loader',
options:{
name:'images/[name].[hash:8].[ext]',
publicPath:'/build/',
limit:4096
}
},
{
test:/\.(woff|woff2|ttf|eot|otf)$/,
loader:'url-loader',
options:{
name:'fonts/[name].[hash:8].[ext]',
publicPath:'/build/',
limit:4096
}
},
{
test:/\.s[ac]ss$/,
use:[
{
loader:'/var/www/node_modules/extract-text-webpack-plugin/dist/loader.js',
options:{
omit:1,
remove:true
}
},
{
loader:'style-loader'
},
{
loader:'css-loader',
options:{
minimize:true,
sourceMap:false,
importLoaders:1
}
},
{
loader:'postcss-loader',
options:{
sourceMap:false,
ident:'postcss',
plugins:[
{
[
Function:plugin
] options:{
grid:false
},
browsers:undefined,
info:[
Function
],
postcssPlugin:'autoprefixer',
postcssVersion:'6.0.23'
}
]
}
},
{
loader:'resolve-url-loader',
options:{
sourceMap:false
}
},
{
loader:'sass-loader',
options:{
sourceMap:true,
includePaths:[
'/web'
]
}
}
]
}
]
},
plugins:[
ExtractTextPlugin {
filename:'[name].[contenthash:8].css',
id:1,
options:{
allChunks:false
}
},
DeleteUnusedEntriesJSPlugin {
entriesToDelete:[
]
},
ManifestPlugin {
opts:{
publicPath:null,
basePath:'build/',
fileName:'manifest.json',
transformExtensions:/^(gz|map)$/i,
writeToFileEmit:true,
seed:null,
filter:null,
map:null,
generate:null,
sort:null,
serialize:[
Function:serialize
]
}
},
LoaderOptionsPlugin {
options:{
debug:false,
options:{
context:'/var/www',
output:{
path:'/var/www/web/build'
}
},
test:{
test:[
Function:test
]
}
}
},
HashedModuleIdsPlugin {
options:{
hashFunction:'md5',
hashDigest:'base64',
hashDigestLength:4
}
},
WebpackChunkHash {
algorithm:'md5',
digest:'hex',
additionalHashContent:[
Function
]
},
ProvidePlugin {
definitions:{
'$':'jquery',
jQuery:'jquery',
'window.jQuery':'jquery'
}
},
CleanWebpackPlugin {
paths:[
'**/*'
],
options:{
root:'/var/www/web/build',
verbose:false,
allowExternal:false,
dry:false
}
},
DefinePlugin {
definitions:{
'process.env':{
NODE_ENV:'"production"'
}
}
},
UglifyJsPlugin {
options:{
sourceMap:false
}
},
FriendlyErrorsWebpackPlugin {
compilationSuccessInfo:{
messages:[
]
},
onErrors:undefined,
shouldClearConsole:false,
formatters:[
[
Function:format
],
[
Function:format
],
[
Function:format
],
[
Function:format
],
[
Function:format
],
[
Function:format
]
],
transformers:[
[
Function:transform
],
[
Function:transform
],
[
Function:transform
],
[
Function:transform
],
[
Function:transform
],
[
Function:transform
]
]
},
AssetOutputDisplayPlugin {
outputPath:'web/build',
friendlyErrorsPlugin:FriendlyErrorsWebpackPlugin {
compilationSuccessInfo:{
messages:[
]
},
onErrors:undefined,
shouldClearConsole:false,
formatters:[
[
Function:format
],
[
Function:format
],
[
Function:format
],
[
Function:format
],
[
Function:format
],
[
Function:format
]
],
transformers:[
[
Function:transform
],
[
Function:transform
],
[
Function:transform
],
[
Function:transform
],
[
Function:transform
],
[
Function:transform
]
]
}
},
{
apply:[
Function:bound apply
]
},
ZopfliPlugin {
asset:'[path].gz[query]',
algorithm:[
Function
],
filename:false,
compressionOptions:{
verbose:false,
verbose_more:false,
numiterations:15,
blocksplitting:true,
blocksplittinglast:false,
blocksplittingmax:15
},
test:/\.(js|css|svg|ttf)$/,
threshold:1400,
minRatio:0.8,
deleteOriginalAssets:false
},
BrotliPlugin {
asset:'[path].br[query]',
test:/\.(js|css|svg|ttf)$/,
threshold:1400,
minRatio:0.8,
deleteOriginalAssets:false,
compress:[
Function
]
}
],
performance:{
hints:false
},
stats:{
hash:false,
version:false,
timings:false,
assets:false,
chunks:false,
maxModules:0,
modules:false,
reasons:false,
children:false,
source:false,
errors:false,
errorDetails:false,
warnings:false,
publicPath:false
},
resolve:{
extensions:[
'.js',
'.jsx',
'.vue',
'.ts',
'.tsx'
],
alias:{
}
},
externals:{
}
}
这里还有一些有趣的软件包版本
@symfony/webpack-encore@0.20.1
node-sass@4.9.0
sass-loader@7.0.3
webpack@3.12.0
答案 0 :(得分：1)
您可以使用Webpack别名。解决每次导入Invoke-Sqlcmd : Cannot drop database "DbName" because it is currently in use.
At line:1 char:1
+ Invoke-Sqlcmd -Database Dbname-ServerInstance ".\SQLEXPRESS" -Que ...
+ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+ CategoryInfo : InvalidOperation: (:) [Invoke-Sqlcmd], SqlPowerShellSqlExecutionException
+ FullyQualifiedErrorId : SqlError,Microsoft.SqlServer.Management.PowerShell.GetScriptCommand
到项目的/templates文件夹中的问题。
templates/我阅读了const path = require('path');
module.exports = {
// ...
resolve: {
alias: {
'/templates': path.resolve(__dirname, './templates')
}
}
};
并发现了@sympony/webpack-encore的设置。您可以使用以下示例。
addAliases在导入的Scss / SASS中，在文件路径前面使用const path = require('path');
const Encore = require('@symfony/webpack-encore');
Encore
// ...
.addAliases({
'/templates': path.resolve(__dirname, './templates')
});
。
~答案 1 :(得分：0)
可能您自己已经找到了答案，但是以防万一，其他人在此处使用使用url（）以及与指向其导入文件的路径相对的路径的常见方法是使用resolve-url-loader。另外请注意，您必须在前面的加载程序中将sourceMap设置为true。
https://www.npmjs.com/package/resolve-url-loader
这是有关如何使用它的示例：
{
// Note that sourceMap is needed to be true at least in sass-loader so resolve-url-loader works fine
test: /\.scss$/,
use: [
{
loader: "style-loader",
options: { sourceMap: true }
}, // Adds CSS to the DOM by injecting a <style> tag
{
loader: "css-loader",
options: { sourceMap: true }
}, // The css-loader interprets @import and url() like import/require() and will resolve them.
{
loader: "postcss-loader",
options: {
sourceMap: true,
plugins: [
require("autoprefixer")({ browsers: ["last 2 versions"] })
]
}
}, // Adds prefix for cross-browser support
{
loader: "resolve-url-loader",
options: { sourceMap: true }
}, // Webpack loader that resolves relative paths in url() statements based on the original source file.
{
loader: "sass-loader",
options: { sourceMap: true }
} // Loads a Sass/SCSS file and compiles it to CSS.
]
}
答案 2 :(得分：0)
我成功使用了.env中设置了〜和NODE_ENV的绝对导入
/。env：
NODE_PATH=src/
假设/ scrcs文件中存在/src/styles/variables.scss，
@import ~styles/variables`
与CreateReactApp v2.0正常工作。
参考：https://github.com/facebook/create-react-app/issues/4494#issuecomment-412113793